jcrop

jQuery的图像裁剪插件Jcrop

ぃ、小莉子 提交于 2020-04-07 09:02:25
1.最基本使用方法 html代码部分: <img src="demo_files/flowers.gif" id="demoImage"/> js部分: $( function() { $("#demoImage").Jcrop(); } ); 这样就可以在图片上进行裁剪了。 2.得到选中区域的坐标以及回调函数 html代码部分如下: <img src="demo_files/flowers.jpg" id="demoImage" /> <label>x1</label><input type="text" id="txtX1" /> <label>y1</label><input type="text" id="txtY1" /> <label>x2</label><input type="text" id="txtX2" /> <label>y2</label><input type="text" id="txtY2" /> <label>width</label><input type="text" id="txtWidth" /> <label>height</label><input type="text" id="txtHeight" /> js代码部分如下: $( function() { //事件处理 $("#demoImage").Jcrop( {

jQuery 图像裁剪插件Jcrop

谁说胖子不能爱 提交于 2020-04-07 07:35:27
目录 Jcrop简介 Jcrop 是一个功能强大的 jQuery 图像裁剪插件,结合后端程序(例如:PHP)可以快速的实现图片裁剪的功能。 Jcrop是一款免费的软件,采用 MIT License 发布。 注: 本文主要围绕 Jcrop v2.0.0-RC1 版本进行介绍,一些参数或API在 Jcrop v0.9.12 及之前版本中可能并不支持。 版本 Jcrop v0.9.12 支持画一个框截取图片。 Jcrop v2.0.0-RC1 相比于老版本,新增了支持画多框的功能。 下载地址: http://jcrop.org/download 下载对应版本的压缩包。 压缩包中有demo目录,其中有多种应用场景的范例,可以参考。 使用方法 载入CSS文件 <link rel="stylesheet" href="Jcrop.css"> 载入Javascript文件 <script src="jquery.js"></script> <script src="Jcrop.js"></script> 给IMG标签加上ID <img id="element_id" src="pic.jpg"> 调用Jcrop $('#element_id').Jcrop(); 参数说明 下表为Jcrop对象的主要参数: 属性类别 名称 默认值 说明 选中框属性 edge { n: 0, s: 0, e: 0,

Jcrop not cropping properly the images

落爺英雄遲暮 提交于 2020-02-20 07:55:06
问题 My jcrop code $(function(){ // Create variables (in this scope) to hold the API and image size var jcrop_api, boundx, boundy, // Grab some information about the preview pane $preview = $('#preview-pane'), $pcnt = $('#preview-pane .preview-container'), $pimg = $('#preview-pane .preview-container img'), xsize = $pcnt.width(), ysize = $pcnt.height(); //console.log('init',[xsize,ysize]); $('#target').Jcrop({ onChange: updateInfo, onSelect: updateInfo, onRelease: clearInfo, setSelect: [0, 0, 150,

Do we need to permit ruby virtual attributes also?

天大地大妈咪最大 提交于 2020-01-25 03:17:20
问题 Till now I thought, I have to permit only those attributes which I required to save in database. But recently I used Jcrop to crop my User avatar and it has 4 virtual attributes which will be sent after crop from the front end, Here is my model class User < ActiveRecord::Base mount_uploader :avatar, AvatarUploader attr_accessor :crop_x, :crop_y, :crop_w, :crop_h after_update :crop_avatar def crop_avatar avatar.recreate_versions! if crop_x.present? end end When I submit after crop, my console

Do we need to permit ruby virtual attributes also?

狂风中的少年 提交于 2020-01-25 03:17:15
问题 Till now I thought, I have to permit only those attributes which I required to save in database. But recently I used Jcrop to crop my User avatar and it has 4 virtual attributes which will be sent after crop from the front end, Here is my model class User < ActiveRecord::Base mount_uploader :avatar, AvatarUploader attr_accessor :crop_x, :crop_y, :crop_w, :crop_h after_update :crop_avatar def crop_avatar avatar.recreate_versions! if crop_x.present? end end When I submit after crop, my console

Angular insecure url

大兔子大兔子 提交于 2020-01-24 06:31:33
问题 I'm using this directive to use jCrop with Angular: http://plnkr.co/edit/Z2IQX8s9UK6wQ1hS4asz?p=preview When I load in a value for src , I get this error: Can't interpolate: {{profileImg}} Error: [$sce:insecurl] Then it links me to a page that says this: Blocked loading resource from url not allowed by $sceDelegate policy. My html is this: <img-cropped src={{profileImg}} selected='selected(cords)'/> And this error happens when I change $scope.profileImg to the url of my image. I'm linking to

Input file show live selected image in JCrop

☆樱花仙子☆ 提交于 2020-01-23 12:26:28
问题 I am using JCrop to resize and crop images. I wanted to add a feature so the user can: -Select a image file -Use jcrop to edit -Upload without changing the page I can do all these separately, but I get bugs when I mix these. $('#target').attr('src', e.target.result); $('#target2').attr('src', e.target.result); The problem right now is, when I change the src location of id "target" main image, it doesn't show my new image. But when I do it on the id "target2" preview image it does show my new

Input file show live selected image in JCrop

淺唱寂寞╮ 提交于 2020-01-23 12:23:49
问题 I am using JCrop to resize and crop images. I wanted to add a feature so the user can: -Select a image file -Use jcrop to edit -Upload without changing the page I can do all these separately, but I get bugs when I mix these. $('#target').attr('src', e.target.result); $('#target2').attr('src', e.target.result); The problem right now is, when I change the src location of id "target" main image, it doesn't show my new image. But when I do it on the id "target2" preview image it does show my new

Image converted to Base64 not showing on bootstrap modal's canvas

我只是一个虾纸丫 提交于 2020-01-15 03:45:14
问题 I am taking the Image from user,performing the crop operation, converting it to base64 and then drawing it on a canvas. For the cropping I am using jcrop library. $(document).on("change","#photograph",function() { $("#picCrop").modal('show'); $("#views").empty(); image = null; canvas = null; alert("canvas"+(canvas==null)+" Image"+ (image==null)); loadImage(this); $(this).replaceWith('<input id="photograph" type="file" class="form-control">'); }); Here I am facing the issue, without alert(

【Java】JavaWeb文件上传和下载

妖精的绣舞 提交于 2019-12-26 03:12:10
  web网站中常常有的功能:上传头像、上传封面等;一般图片都有一定的比例限制,所以需要前端在上传图片时,进行裁剪,并把裁剪后的图片进行上传。   本例采用Jcrop插件实现裁剪效果,canvas裁剪图片,并把base64位的toDataURL图片转换成blob(二进制数据),最后使用XMLHttpRequest上传到服务器。   Jcrop演示及下载地址: http://code.ciaoca.com/jquery/jcrop/demo/ Jcrop的使用   本例做Jcrop的简单预览功能(同理可以实现网页的放大镜功能) 载入 CSS 文件 1 <link rel="stylesheet" href="jquery.Jcrop.css"> 载入 JavaScript 文件 1 <script src="jquery.js"></script> 2 <script src="jquery.Jcrop.js"></script> 给 IMG 标签加上 ID 1 <img id="element_id" src="pic.jpg"> 调用 Jcrop 1 $('#element_id').Jcrop(); 实例代码 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>图像裁剪