Question

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

网络上的大多数资源似乎都是dragIcon.width任意设置为100.这只是人们在没有检查功能的情况下复制彼此的代码的问题吗？

因此...

图像变量上的width属性实际上是setDragImage（）接受的吗？
如果没有，您如何设置图标的宽度而不手动更改像photoshop这样的程序中的图像大小？

Answer 1

在<img>中使用setDragImage时，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附加到主体的原因），浏览器会将其渲染视图用作拖动图像。

Answer 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

HTML5 setDragImage（）：dragIcon.width绝对没有

2 个答案: