带有织物 js 的画布中的新图像不适用于 chrome答案

【问题标题】：new image in canvas with fabric js doesn't work for chrome带有织物 js 的画布中的新图像不适用于 chrome
【发布时间】：2018-05-14 03:30:23
【问题描述】：

我使用fabric.js 来管理我的画布，但是当我在画布中放置一张图片后制作新的fabric.Image 时，它在chrome 中不起作用！

这是我的代码：

var imgElement = document.getElementById(idImageToDrage);

var imgInstance = new fabric.Image(imgElement, {
    id: parseInt(idImageToDrage),
    left: calculPositionLeft, // position when I drop the picture
    top: calculPositionTop,
    scaleX: 0.147,
    scaleY: 0.147,
    angle: 0,
    zindex: $('#containerInnerImgToDrag').children().length,
    name: 'img'
});

imgInstance.setControlsVisibility({ 'bl': false, 'br': false, 'mb': false, 'ml': false, 'mr': false, 'mt': false, 'tl': false, 'tr': false });
canvas.add(imgInstance);

此代码适用于 Firefox，我该怎么办？

谢谢！

【问题讨论】：

你是从外面还是从同一个窗口丢图片？
我有 2 个容器，一个是我所有图片的地方，第二个是我的画布，例如：1<div>Pictures</div>2<canvas></canvas>
看起来你在用idImageToDrage做奇怪的事情。
idImageToDrage 设置在之前
查看fiddle

标签： javascript jquery google-chrome canvas fabricjs

【解决方案1】：

你需要使用

var objectDropped = ui.draggable[0];

var imgInstance = new fabric.Image(objectDropped, {

丢弃的图像元素作为织物图像的来源。

这里更新fiddle

【讨论】：