如何生成“屏幕截图” html div与外部图像？ [英] How to generate "screenshot" of html div with external images?

问题描述

我有一个带有外部图像的HTML div。 （以下是一个示例，但实际情况下我使用的是Amazon S3，因此，将图像下载并存储在同一台服务器上不是一种选择）。目前，我正在使用

  $（function（）{
 $（＃btnSave）。click（function（）{
 html2canvas（$（＃widget），{
 onrendered：function（canvas）{
 var context = canvas.getContext（2d）; //返回2d上下文对象
 var img = new Image（）//为新图像创建一个变量
 
 img.src =http://lorempixel.com/400/200/; //指定图片
 context.drawImage（img，0,50）; //在指定的x和y位置绘制图片
 //转换并下载为图片
 theCanvas = canvas; 
 document.body.appendChild（canvas）; 
 
 //转换并下载为图片
 Canvas2Image.saveAsPNG（canvas）; 
 $（＃img-out）。append（canvas）; 
} 
}）; 
}）; 
}）; 
  

更新3 （12/29/2016） JSFiddle

经过研究，发现问题是因为我们只是将仅为传递消息的图像源分配给浏览器以检索数据。

进一步的图像元素可能并不是真正可以通过浏览器访问的，点击可以从中绘制画布。

更改代码以解决OP面临的铬问题，如下所示：

  img.onload = function（）{
 context.drawImage（img，0，50）; //在指定的x和y位置绘制图像
} 
  

更新4 JSFiddle

根据操作系统的要求使图像位置变为动态。

I have a HTML div with external images. (The following is an example, but in the actual case I am using Amazon S3, so downloading and storing the image on the same server is not an option) Currently I am using html2canvas to convert the div to image. However, the external image is always replaced by a blank space.

The code I use to capture the image:

$(function() { 
    $("#btnSave").click(function() { 
        html2canvas($("#widget"), {
            onrendered: function(canvas) {
                theCanvas = canvas;
                document.body.appendChild(canvas);

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

Edited: jsfiddle: https://jsfiddle.net/0y2zxxL8/3/

I may use other library. I may also do that in backend. (I am using PHP + laravel 5 for backend) Is there a way I can generate a "screenshot" of the HTML div with external images?

Update The current answer are working after editing. Yet, for my actual use, there will be multiple image with their position set by the user by drag and drop. I can still get the position, but it would be better for me if it is possible to not set the position specifically.

解决方案

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
I place some code into your one, check it out. Hope this will be your solution..!

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

After research, found that the problem is because we are only assigning the image source which is only pass message to the browser to retrieve the data.

Further image element is may be not really accessible with the browser when click to draw canvas from it. We are just tell code to load it and it's done.

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.

这篇关于如何生成“屏幕截图” html div与外部图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！