Question

我是一个真正的JavaScript或jQuery文盲，只是试图解决以前创建的功能。这适用于Firefox但在Chrome上失败。我导入图像然后裁剪所需的数据但有时图像不清晰且非常小所以我需要提供缩放功能，然后因为缩放集中在中心图像我需要提供移动选项，左右移动图像，移动和缩放是可以单独使用img标签，所以我使用它，它在Firefox上运行良好，没有任何错误，但图像根本没有显示在铬，下面是与导入图像和创建图像相关的代码块。以前的开发人员使用div标签来创建画布，但缩放和移动对我来说并不适用于div标签。请询问是否需要其他详细信息。

$("#movingImage").empty();
//$("#movingImage").attr("src", image.src);
$("#movingImage").append("<canvas id=\"canvas\">");
canvas = $("#canvas")[0];
context = canvas.getContext("2d");
canvas.width = image.width;
canvas.height = image.height;
context.drawImage(image, 0, 0);

HTML如下：

<div id="views" >   
<img src="" id="movingImage" alt="" />  
</div>

Answer 1

append()方法将给定元素作为目标的子元素插入。然而img标签不能生孩子。也许试试after？

出于同样的原因，不确定empty()方法是否适用于此...

您还可以尝试使用replaceWith()方法将img节点替换为您创建的画布

Chrome中无法使用的图片导入适用于Firefox

1 个答案: