Mobile End H5 Page screenshot "contains Domtoimage, Html2canvas" __html

Cause:Because the cloud Habitat project needs to support business cards saved to the local feature "red box below", so you need to intercept the page's business card information, and save to the local. Recommended to: Need to get the page content, to the page screenshot of the small partners




describes two tools: Html2canvasOfficial address: Https://github.com/niklasvh/html2canvas
Advantages: 1. Greater number of users and more complete information
Disadvantages: 1. The feeling is not maintenance updated


DomtoimageOfficial address "GitHub example is full": https://github.com/tsayen/dom-to-image
Advantages: 1. Someone to maintain 2.git active, the author spoke 3. Easy to use
Disadvantages: 1. The new control, the use of fewer people, information is not full 2. iOS mobile phone can not screenshot, pollution Canvas.todataurl will be the error "is not resolved" (Reference Link: https://github.com/tsayen/dom-to-image/issues/40)
The error message is as follows:"Security_err:dom Exception 18:the operation is insecure" modified Dom-to-image.js source code is as follows:

    iOS compatible 
    function topng (node, options) {return
        draw node, Options | | {})
            . Then (function (Result) {
                try {
                    //original
                    var image = Result.canvas.toDataURL ("Image/png", 1.0);
                    return image;

                    To SVG more clearly
                    //Console.log (RESULT.SVG.SRC);
                    return result.svg.src;
                } catch (Err) {
                    console.warn (err);
                    alert (RESULT.SVG.SRC);
                    Console.log (RESULT.SVG.SRC);
                    Return "Error"}
            );
    

Final Scenario Selection:A lot of information was taken into account and the final decision iOS uses Html2canvas, Android uses Domtoimage
Code:

  Crop business card
  Cropcard () {let
    self = this;
    Get DOM structure let
    card_target = This.refs.copyCardArea;
    Domtoimage.topng (Card_target). Then (function (dataurl) {
      //andriod 
      if (dataurl!= "error") {
        //alert (" Domtoimage ");
        Self.setstate ({
          imgurl:dataurl,
          isdownloadimg:true,
        })
      }
      //iOS
      else {let
        b64 ;
        Html2canvas (Card_target, {
          usecors:true
        }). Then (function (canvas) {
          try {
            b64 = Canvas.todataurl ("Image/png");
          } catch (Err) {
            console.log (ERR)
              /alert (ERR)
          }
          self.setstate ({
            imgurl:b64,
            Isdownloadimg:true,
          })
        }). catch (function onrejected (error) {});
      }
  

Mobile Taobao compatible:

Hand Amoy Prohibited, users use screenshots, recommend the use of official Jsbridge

Windvane Link: http://h5.alibaba-inc.com/api/WindVane-API.html

Method:wvscreen.capture disadvantage: 1. can only intercept the entire screen , not only to get business card information
2. Do not know is not react reasons, direct use, there will be some of the situation to intercept the effect of the gray mask, so the delay of 300 ms screenshot
Introduced:

    <script src= "//g.alicdn.com/mtb/lib-windvane/2.1.8/windvane.js" ></script>

Code:

      Window.settimeout (() => {
        this.taobaocapture ();
      }, 300);

  Taobaocapture () {let
    self = this;
    var params = {
      //whether to save a screenshot result to the album
      Inalbum: ' True '
    };
    Window. Windvane.call (' Wvscreen ', ' capture ', params, function (e) {
      //alert (' success: ' + json.stringify (e));
      Screenshot success Prompts discourse
      self.setstate ({
        istips:true,
        line1:tipWords.saveCardS.line1,
        line2: TipWords.saveCardS.line2,
      });
    }, Function (e) {
      //alert (' failure: ' + json.stringify (e));
      Screenshot failure prompts discourse
      self.setstate ({
        istips:true,
        line1:tipWords.saveCardF.line1,
        line2: TipWords.saveCardF.line2,
      });
    }
  

written at the end:

The

Domtoimage and Html2canvas screenshots in PNG format will lose part of the picture Precision and blur the picture.
If is not on the move side, it is recommended to use SVG format, more clearly .
Two plugins individuals prefer  domtoimage ~


DEMO: https://codepen.io/CandyQiu/pen/XzmGNL?editors =0010