Javascript converts the absolute path of an image to base64 encoding-JS Tutorial-php.cn

Javascript converts the absolute path of an image to base64 encoding

小云云

Release： 2018-01-13 09:04:52

Original

6307 people have browsed it

This article mainly introduces the Javascript method of converting the absolute path of an image into base64 encoding. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to have a look. Hope it helps everyone.

We can use the canvas.toDataURL method to convert the absolute path of the image into base64 encoding; here we quote a picture on the Taobao homepage as follows:

The code is as follows:

var img = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg";

Copy after login

We write the code as follows:

function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, img.width, img.height);
    var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
    var dataURL = canvas.toDataURL("image/"+ext);
    return dataURL;
}
var img = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg";
var image = new Image();
image.src = img;
image.onload = function(){
  var base64 = getBase64Image(image);
  console.log(base64);
}

Copy after login

Chrome runs as follows:

Through the search, we understand that we are using a picture on the Taobao server and accessing it under the local server. As a result, there is a cross-domain problem with the picture; so far, we can put the picture under the local server to solve the above cross-domain problem. ;For example, I now save the pictures under Taobao server under the local server; the following code can solve the problem:

var img = "http://127.0.0.1/base64/1.jpg";
function getBase64Image(img) {
  var canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0, img.width, img.height);
  var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
      var dataURL = canvas.toDataURL("image/"+ext);
  return dataURL;
}
var image = new Image();
image.src = img;
image.onload = function(){
  var base64 = getBase64Image(image);
  console.log(base64);
}

Copy after login

But sometimes we want to reference other servers How to solve the picture? We can use the following code to take effect under Chrome and Firefox. It does not seem to be supported under Safari 6 currently; the following code:

image.crossOrigin = &#39;&#39;;

Copy after login

All codes are as follows:

var img = "https://img.alicdn.com/bao/uploaded/TB1qimQIpXXXXXbXFXXSutbFXXX.jpg";
//var img = "http://127.0.0.1/base64/1.jpg";
function getBase64Image(img) {
  var canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;

  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0, img.width, img.height);
  var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
  var dataURL = canvas.toDataURL("image/"+ext);
  return dataURL;
}
var image = new Image();
image.crossOrigin = &#39;&#39;;
image.src = img;
image.onload = function(){
  var base64 = getBase64Image(image);
  console.log(base64);
}

Copy after login

The above code has been tested and effective under chrome and firefox, but is currently not supported in safari;

Related recommendations:

How to use the absolute path and relative path of html

How to use dirname(__FILE__) in php to get the absolute path of the current file

Detailed explanation of the difference between relative paths and absolute paths

The above is the detailed content of Javascript converts the absolute path of an image to base64 encoding. For more information, please follow other related articles on the PHP Chinese website!