Use javascript and canvas to obtain images on the UIWebView page (No download is required)

To obtain the image of the img tag on the UIWebView page, you can obtain the URL and download it again. The image consumes traffic, time, and cannot pass verification. Here we use the stringByEvaluatingJavaScriptFromString function of UIWebView to execute a javascript code and return the image to be obtained from the img tag on the UIWebView page. The method on the Internet is to obtain the URL and download it again, traffic consumption and time consumption cannot be verified. Here we use the stringByEvaluatingJavaScriptFromString function of UIWebView to execute a javascript code and return image data. The process is to obtain the img tag. You can use various methods, such as ById, ByTags, and elementFromPoint. Create a canvas tag, create a context, and set the canvas as a large number of img images into the context to return the data in the canvas or context in the first three steps is required, step 1 can be in two ways, return the RGBA data of context or the dataURL of canvas (the entire image is base64-encoded ). Method 1:

function() {      var img = document.getElementById("myimg");      var canvas = document.createElement("canvas");      var context = canvas.getContext("2d");      canvas.width = img.width;      canvas.height = img.height;      context.drawImage(img,0,0,img.width,img.height);      var imageData = context.getImageData(0,0,img.width,img.height);      var dataArray = new Array(imageData.data.length);      for(var i = 0; i < dataArray.length;i++)          dataArray[i] = imageData.data[i];      return dataArray.toString();  }

 

The returned data is in the format of rrr, ggg, bbb, aaa, rrr, rrr, ggg, bbb, aaa, rrr,... you can transfer the data to CGBitmapContext and convert it to CGImage. CGImage and UIImage can be exchanged. Method 2:

function() {      var img=document.getElementById("myimg");      var canvas = document.createElement("canvas");      var context = canvas.getContext("2d");      canvas.width = img.width;      canvas.height = img.height;      context.drawImage(img,0,0,img.width,img.height);      return canvas.toDataURL("image/png");  ｝  

 

The returned data is a base64-encoded dataURL. After decoding by a third-party library, the obtained NSData can be directly created with UIImage. By the way, we will get a general idea. The NSData for creating a UIImage contains the complete jpg or png image data, which is compressed and encoded with image information data. You cannot directly create a UIImage or CGImage using RGBA data. Generally, you want to click an image on the webpage and save it. For more information, see http://blog.csdn.net/favormm/article/details/6614441. A special problem is that if the img src is an absolute path indicating an external domain server, this method is not feasible and the browser prohibits cross-origin access. You can change the myimg in the demo to myimg2, which will fail. The demo is accessed by the test page https://code.csdn.net/hursing/pagetest/blob/master/getimage.html [m_webView loadRequest: [NSURLRequest requestWithURL: [NSURL URLWithString: @ "https://code.csdn.net/hursing/pagetest/blob/master/getimage.html"]; with 5 points set, I want to know how many people can use this technology. If you do not have any credits, contact me directly to send them to you. More peers are welcome. Run the demo. After loading the webpage, click the button and add the breakpoint to the ViewController. I believe you know.