JavaScript Code Example for Implementing Screenshot and Save Image Functionality

A few days ago, there was such a requirement in our company project, to take a screenshot of a part of the web page with one click. This feature is actually an optimization of manual labor, if it is done manually, everyone should know how to do it (use a screenshot tool to take a screenshot in the specified area, then save it locally, and then upload it to the server). My main focus is on solving this batch optimization of manual labor. Well, no more chatter. Let's go straight to the logic and code.'

The solution to this problem: html to canvas to png. There is currently such a plugin: html2canvas,

   html2canvas($targetElem, {
     useCORS: true,
     onrendered: function(canvas) {
     }
     });

This '$targetElem' is the html to be converted, useCORS is used to set whether the image is cross-domain (such as when the domain name of the html image is not the same as the current website, this property needs to be set), onrendered is the method to be executed after conversion.

There is a situation that needs to be considered: if there is an svg tag in the html tag, currently in htm2Canvas does not support svg tags.

In this case, you need to convert svg to html first2Canvas can handle tags.

My strategy is to convert svg to canvas, html2The canvas conversion is complete, and then the svg is restored. I still need this plugin canvg (svg to canvas) here

The specific code is as follows

 var nodesToRecover = [];
 var nodesToRemove = [];
 var $svgElem = $targetElem.find('svg');
 $svgElem.each(function(index, node) {
   var parentNode = node.parentNode;
   var canvas = document.createElement('canvas');
   canvg(canvas, parentNode, {ignoreMouse: true, ignoreAnimation: true});
   //Convert SVG to canvas
   nodesToRecover.push({
      parent: parentNode,
      child: node
   });
   parentNode.removeChild(node);
   nodesToRemove.push({
      parent: parentNode,
      child: canvas
    });
    parentNode.appendChild(canvas);
 });
 html2canvas($targetElem, {
   useCORS: true,
   onrendered: function(canvas) {
      var base64Image = canvas.toDataURL('image/png').substring(22)
      //Reply to SVG
      nodesToRemove.forEach(function(pair) {
          pair.parent.removeChild(pair.child);
      });
      nodesToRecover.forEach(function(pair) {
          pair.parent.appendChild(pair.child);
      });
   )

I have completely implemented this plan and used it in our project. Welcome to use it, and if you have any questions, you can leave a message for me.

That's all for this article. I hope it will be helpful to everyone's learning, and I also hope everyone will support the Yelling Tutorial.

Declaration: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously, and this website does not own the copyright, has not been manually edited, and does not assume any relevant legal responsibility. If you find any content suspected of copyright infringement, please send an email to: notice#w3Please replace '#' with '@' when sending an email for reporting, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.