Jcrop在渲染时为透明图像添加黑色背景

时间:2016-08-19 10:48:13

标签: jquery canvas jcrop

当尝试使用带有透明背景画布的Jcrop时,它会将其呈现为黑色,我已经在线检查过,并且根据jcrop turns transparent image black上的问题给出的解决方案对我不起作用,它仍然会产生黑色背景。以下是我的代码。任何帮助实现这项工作将不胜感激!

var maxWidth = 200;
var img = new Image();

img.onload = function() {

  var canvas = document.createElement('canvas');
  canvas.width = maxWidth;
  canvas.height = img.height * (maxWidth / img.width);

  var ctx = canvas.getContext('2d');

  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

    document.getElementById('image').src = canvas.toDataURL();

  $('#image').Jcrop({
    bgColor:'',
    setSelect: [0, 0, canvas.width, canvas.height]
  });


}
img.setAttribute('crossOrigin', 'anonymous');
img.src = 'https://z1.porter21.com/wp-content/uploads/sites/2/2015/02/sprite1.png';

可以在https://jsfiddle.net/9Lmapguv/

找到实时样本

1 个答案:

答案 0 :(得分:0)

http://jsfiddle.net/seahorsepip/wepu47zn/

在裁剪/缩放/旋转/等上添加了缩略图预览:http://jsfiddle.net/seahorsepip/wepu47zn/1/

在裁剪选择和裁剪/缩放/旋转/等上添加了缩略图预览: http://jsfiddle.net/seahorsepip/wepu47zn/2/ 第三个链接中的on crop选择缩略图由div包装器裁剪,隐藏溢出以防止在每个选择上都需要画布裁剪。

来源:How should I crop the image at client side using jcrop and upload it?

查看validateImage函数中的注释,您可以调用方法来更新缩略图图像源。我添加bgColor: ""似乎现在以某种方式对代码起作用了。由于@Tata​​rize

,它还有一些转换函数和提交函数(IE10 +)

要在旧版浏览器中提交裁剪的图片,请在源代码处查看我的帖子。

我从来没有这样做过:/

但即使在裁剪器中显示黑色,裁剪输出仍然是透明的图像。

我使用了以下" hack"用背面背景隐藏画布元素,改为显示透明的css背景图像。

$(".jcrop-active").css({"background": "url(\""+img.src+"\")", "background-size": "100%"});


.jcrop-active canvas {
    display: none;
}

示例:https://jsfiddle.net/seahorsepip/w8bgm8hk/