HTML5 drawImage - 拖动时无法在 Chrome 中工作答案

【问题标题】：HTML5 drawImage - Not working in Chrome while draggingHTML5 drawImage - 拖动时无法在 Chrome 中工作
【发布时间】：2014-02-25 01:34:22
【问题描述】：

我正在尝试将图像拖放到画布中。但是在 chrome 中拖动时，图像会消失，但在 Mozilla 中它可以正常工作。对此的任何帮助将不胜感激。

HTML 文件

<head>
    <script>
        var canvasImages = [];

        function imageProp() {
            this.imgName = ' ';
            this.imgX = 0;
            this.imgY = 0;
            this.ImgWidth = 1;
            this.ImgHeight = 1;
        }

        function GetFilename(url) {
           if (url) {
              var m = url.toString().match(/.*\/(.+?)\./);
              if (m && m.length > 1) {
                 return m[1];
              }
           }
           return "";
        }

        function load(source) {
            var canvas = document.getElementById("mycanvas");
            var ctx = canvas.getContext('2d');
            var imageObj = new Image();

            //Loading image to Canvas
            imageObj.onload = function () {
                ctx.drawImage(imageObj, 0, 0);
            };
            imageObj.src = source;

            //Inserting properties of image loaded in canvas to an array
            var Property = new imageProp;
            //Property.imgName = GetFilename(source);
            Property.imgName = source;
            Property.imgX = 0;
            Property.imgY = 0;
            Property.ImgWidth = imageObj.width;
            Property.ImgHeight = imageObj.height;
            canvasImages.push(Property);
        }
    </script>
</head>

<body>
    <img id = "imgID" onclick=" load(this.src)" src = 'download.png'/>
    <canvas id="mycanvas" width="1000" height="1000">HTML5 Not Supported</canvas>
    <script src="Canvas_js.js"></script>
</body>

Javascript 文件

(函数(){

"use strict";
/*global document*/
/*global clear*/
/*global canvasImages*/
/*jslint devel: true */
/*jslint browser: true */

var canvas, ctx, ghostcanvas, gctx, RedrawInterval = 20, canvasValid = false, clickLoc = {}, isDragging = false, index = 0, selectedIndex = 0;
clickLoc.x = 0;
clickLoc.y = 0;

function drawCanv() {
    var i = 0, imageObj;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    for (i = 0; i < canvasImages.length; i += 1) {
        imageObj = new Image();
        imageObj = document.createElement('img');
        imageObj.src = canvasImages[i].imgName;
        imageObj.onload = function () {
            ctx.drawImage(imageObj, canvasImages[i].imgX, canvasImages[i].imgY);
        };
    }
}

function resizeHandler(index) {
    ctx.beginPath();
    ctx.strokeRect(canvasImages[index].imgX, canvasImages[index].imgY, canvasImages[index].ImgWidth + 5, canvasImages[index].ImgHeight + 5);
}

function canvasOnClick(e) {
    var rect, i = 0;
    isDragging = true;

    //Get X and Y coordinates of the click
    rect = canvas.getBoundingClientRect();
    clickLoc.x = e.clientX - rect.left;
    clickLoc.y = e.clientY - rect.top;

    //Check whether any image is clicked
    for (i = 0; i < canvasImages.length; i += 1) {
        if (clickLoc.x >= canvasImages[i].imgX && clickLoc.x <= canvasImages[i].imgX + canvasImages[i].ImgWidth && clickLoc.y >= canvasImages[i].imgY && clickLoc.y <= canvasImages[i].imgY + canvasImages[i].ImgHeight) {
            selectedIndex = i;
            resizeHandler(i);
        }
    }
}

function canvasMouseUp(e) {
    isDragging = false;
}

function canvasMouseMove(e) {
    if (isDragging === true) {
        canvasImages[selectedIndex].imgX += 5;
        drawCanv();
    }
}

function init() {
    // Defining Canvas and fake canvas
    canvas = document.getElementById('mycanvas');
    ctx = canvas.getContext('2d');
    ghostcanvas = document.createElement('canvas');
    ghostcanvas.height = canvas.height;
    ghostcanvas.width = canvas.width;
    gctx = ghostcanvas.getContext('2d');

    // Redrawing canvas for the interval
    //setInterval(draw, RedrawInterval);

    // Adding Eventlisteners
    canvas.addEventListener("mousedown", canvasOnClick, false);
    canvas.addEventListener("mouseup", canvasMouseUp, false);
    canvas.addEventListener("mousemove", canvasMouseMove, false);
}

init();

}());

【问题讨论】：

标签： javascript html google-chrome canvas

【解决方案1】：

开始玩弄

user-select: none; 
-webkit-user-select: none;

在你的 CSS 中。

【讨论】：

user-select 用于选择内容。但这里的问题是drawImage。当我在循环中绘制图像时，它会消失