Pure javaScript div saves the image and downloads JS +Canvas+Svg

The most streamlined native JS development, more convenient to expand the development needs of the business

 

Technical logic:

1. Turn the div into an SVG web image

2. Canvas Canvas will be created

3. Set the canvas size to be the same as the div size

DrawImage (img, 0, 0); drawImage(img, 0, 0);

5. Save the Canvas as a PNG image

 

Sample program screenshot:

 

CODE:

Input Div:

Output Image:

            var img = new Image();

img.src = data;

// document.getElementsByTagName(‘body’)[0].appendChild(img);

document.getElementById(“ssssssssssss”).appendChild(img);

imgObj = img;

} function saveMap() { var img = imgObj; //document.getElementById(“ssssssssssss”).getElementsByTagName(“img”); Var canvas = document.createElement(‘canvas’); // Prepare the empty canvas canvas.width = img.width; canvas.height = img.height;

var context = canvas.getContext(‘2d’); // Get the 2d drawing context of the canvas. DrawImage (img, 0, 0);

            var type = ‘png’;

var imgData = canvas.toDataURL(type);

ImgData = imgData.replace(_fixType(type), ‘image/octet-stream’); Var filename = ‘baidufe_’ + (new Date()).getTime() + ‘.’ + type; // download saveFile(imgData, filename); }

        var _fixType = function(type) {

type = type.toLowerCase().replace(/jpg/i, ‘jpeg’);

var r = type.match(/png|jpeg|bmp|gif/)[0];

return ‘image/’ + r;

};

        var saveFile = function(data, filename) {

var save_link = document.createElementNS(

‘www.w3.org/1999/xhtml’, ‘a’);

save_link.href = data;

save_link.download = filename;

            var event = document.createEvent(‘MouseEvents’);

event.initMouseEvent(‘click’, true, false, window, 0, 0, 0, 0, 0,

false, false, false, false, 0, null);

save_link.dispatchEvent(event);

};

</script>

</body>

</html>