HTML5 setDragImage()：dragIcon.width 什么都不做答案

【问题标题】：HTML5 setDragImage(): dragIcon.width does absolutely nothingHTML5 setDragImage()：dragIcon.width 什么都不做
【发布时间】：2014-10-13 18:50:59
【问题描述】：

使用 HTML5 拖放 API 时，虽然 .width 属性对用作拖动图标的图像的宽度没有影响，但它会出现。以这个小提琴为例：http://jsfiddle.net/cnAHv/7/。您可以将dragIcon.width 设置为任何您想要的，它不会改变图标的实际宽度。

网络上的大部分资源似乎都将dragIcon.width 随意设置为100。这只是人们复制彼此的代码而不检查功能的问题吗？

所以...

图像变量的宽度属性实际上是 setDragImage() 可以接受的吗？
如果不是，您将如何在不手动更改图像大小的情况下在 Photoshop 等程序中设置图标的宽度？

【问题讨论】：

标签： javascript html drag-and-drop draggable

【解决方案1】：

当您在setDragImage 中使用<img> 时，Javascript 将只使用实际的图像位图数据，而忽略width 等其他属性。 Check the specs.

但是，如果你这样做：

function handleDragStart(e) {
    var dragIcon = document.createElement('img');
    dragIcon.src = 'http://jsfiddle.net/favicon.png';
    dragIcon.width = '100';
    var div = document.createElement('div');
    div.appendChild(dragIcon);
    document.querySelector('body').appendChild(div);
    e.dataTransfer.setDragImage(div, -10, -10);
}

http://jsfiddle.net/cnAHv/9/

您将看到拖动阴影现在包含更大的图像。这是因为当我们使用其他可见的 HTML 元素时（这就是我将 DIV 附加到正文的原因），浏览器会将其呈现的视图用作拖动图像。

【讨论】：

这会在文档中放置图像并破坏布局。还有其他选择吗？
可能想尝试此博客中的最后一个解决方案link

【解决方案2】：

这个答案可能有点晚，但您也可以使用画布来缩放原始图像。

function handleDragStart(e) {
    var dragIcon = document.createElement('img');
    dragIcon.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD///+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4Ug9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC';
    var width = 100;
    var height = width * (3/4); // The height must be set explicitly. I'm assuming the image is 4:3 for this example
    var c = document.createElement("canvas");
    c.width = width;
    c.height = height;
    var ctx = c.getContext('2d');
    ctx.drawImage(dragIcon,0,0,width,height);
    dragIcon.src = c.toDataURL();
    e.dataTransfer.setDragImage(dragIcon, -10, -10);
}

http://jsfiddle.net/cnAHv/138/

唯一的缺点是如果图像不是来自同一来源，画布可能会受到污染。更多关于受污染的画布here

【讨论】：