Question

如何制作它以便在拖动图像时，拖动的图像大小会根据我指定的内容而改变？例如，当我拖动图像时，我希望重影图像在这种情况下变为更大的尺寸（500），但可能是真的。

使用Javascript：

HTML：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">

    <script src="js/custom.js"></script>
    <style>

        /* Pikachu fits in the container */
        .size {
            height:200px;
            width:200px;
        }
        .size img {
            z-index:10;
            width:100%;
        }
    </style>
    </head>
<body>

    <div class="size">
        <img src="http://img3.wikia.nocookie.net/__cb20140410195936/pokemon/images/archive/e/e1/20150101093317!025Pikachu_OS_anime_4.png" >
    </div>
</body>
</html>

Answer 1

这是一个使用画布的简单方法，可以根据您想要的宽度保持图像宽高比。

function onDrag(src, width, e){

  var img = new Image();

  img.onload = function(){
    var ctx = document.createElement("canvas").getContext("2d");
        ctx.canvas.width = width;
        ctx.canvas.height = img.height * (width / img.width);

    ctx.drawImage(img, 0, 0, img.width, img.height);
    e.dataTransfer.setDragImage(ctx.canvas, 40, 20);
  }

  img.src = src;
}

如果您希望将纵横比从高度开始，而只是在宽度和高度之间切换。

更改拖动鬼图像大小

1 个答案: