Laravel 如何使用外部图像生成 html div 的 screenshot截图

Your JSFiddle given ReferenceError: Canvas2Image is not defined while hit on 'Save PNG' button. So check your code(not fiddle) for same error.

UPDATE
See this JSFiddle example as reference. May this one will help you.

UPDATE 2

Working result with FF v44 and its working. Taken snap with JSFiddle code

$(function() { 
    $("#btnSave").click(function() { 
        html2canvas($("#widget"), {
            onrendered: function(canvas) {
                var context=canvas.getContext("2d"); // returns the 2d context object
                var img=new Image() //creates a variable for a new image

                img.src= "http://lorempixel.com/400/200/"; // specifies the location of the image
                context.drawImage(img,0,50); // draws the image at the specified x and y location
                // Convert and download as image 
                theCanvas = canvas;
                document.body.appendChild(canvas);

                // Convert and download as image 
                Canvas2Image.saveAsPNG(canvas); 
                $("#img-out").append(canvas);
            }
        });
    });
});

UPDATE 3 (12/29/2016) JSFiddle

经过研究，发现问题是因为我们只分配了图像源，这个图像源只是将消息传递给浏览器来检索数据.

当点击以从其绘制画布时，浏览器可能不能真正访问进一步图像元素.我们只是告诉代码加载它，然后就完成了.

Change code to solve OP's facing chrome issue like below:

img.onload = function() {
  context.drawImage(img, 0, 50);// draws the image at the specified x and y location
}

UPDATE 4 JSFiddle
Make image position dynamic based on OP requirement.