Question

当尝试使用带有透明背景画布的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/

找到实时样本

Answer 1

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: ""似乎现在以某种方式对代码起作用了。由于@Tatarize

，它还有一些转换函数和提交函数（IE10 +）

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

~~我从来没有这样做过：/~~

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

我使用了以下＆＃34; hack＆＃34;用背面背景隐藏画布元素，改为显示透明的css背景图像。

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

.jcrop-active canvas { display: none; }

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

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

1 个答案: