由于浏览器安全策略的限制,javascript程序不能自由地访问本地资源,这是对用户信息安全来说,是一项不得不遵守的准则。假如网络上的javascript程序可以自如地访问用户主机的本地资源,那么浏览器用户将毫无安全可言。尽管有这个安全限制,但是在得到用户允许的情况下,浏览器还是可以访问本地资源的。
获得用户允许的方法就是通过标签来让用户手动选择文件,这一过程就是用户授予访问权限的过程。
- 情况一: 将外网服务器上的图片,转为base64 方法1
<img id="img" src="" alt="" /> <img id="ssss" src="https://img10.360buyimg.com/mobilecms/s140x140_jfs/t17458/302/1792090017/223266/7f72f23e/5ad851cdN50df02d5.jpg!q90.webp" alt="" /> <script> var img = new Image(); console.log(img) img.crossOrigin = ""; //跨域 // document.body.appendChild(img) // img.src = $('#img').attr('src'); img.src = document.getElementById("ssss").getAttribute('src'); img.onload = function() { // 图片加载后执行的方法 alert(9) var base64 = getBase64Image(img); // 将图片转成base64格式的方法 // $('#img').attr('src', base64); // 将原来的图片src改为base64格式的地址 document.getElementById("img").setAttribute('src',base64) // 将原来的图片src改为base64格式的地址 } function getBase64Image(img) { var canvas = document.createElement("canvas"); // 创建一个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); // 得到base64 编码的 dataURL console.log(dataURL) return dataURL; } </script>
- 情况二: 将外网服务器上的图片,转为base64,方法2
<img id='lo' style="border: 2px solid salmon; width: 200px; height: 200px;" src=""/ > <script> var surl = 'https://img10.360buyimg.com/mobilecms/s140x140_jfs/t17458/302/1792090017/223266/7f72f23e/5ad851cdN50df02d5.jpg!q90.webp' converImg(surl, function(base64Img) { //转化后的base64 alert(base64Img); document.getElementById('lo').setAttribute('src', base64Img) }); function converImg(url, callback, outputFormat) { var canvas = document.createElement('CANVAS'), ctx = canvas.getContext('2d'), img = new Image; // img.crossOrigin = 'Anonymous'; img.crossOrigin = ''; img.onload = function() { canvas.height = img.height; canvas.width = img.width; ctx.drawImage(img, 0, 0); var dataURL = canvas.toDataURL(outputFormat || 'image/png'); callback.call(this, dataURL); canvas = null; }; img.src = url; } </script>
- 情况三: 用户通过input[type='file'],将图片 转为base64
<input type="file" onchange="selectImage(this.files)" id="imgSel" value="" />
<img id="new" src="" style="width: 40px; height: 40px;border: 1px dashed #000;" />
<script>
function selectImage(e) {
let upload = document.getElementById("imgSel"); //input标签type=file
var reader = new FileReader(); //创建一个字符流对象
var AllowImgFileSize = 2100000; //上传图片最大值(单位字节)( 2 M = 2097152 B )超过2M上传失败
console.log(upload.files[0]);
reader.readAsDataURL(upload.files[0]); //读取本地图片
reader.onload = function(e) {
if (AllowImgFileSize != 0 && AllowImgFileSize < reader.result.length) {
alert( '上传失败,请上传不大于2M的图片!');
return;
}else{
//执行上传操作
alert(this.result); //返回数据
console.log(this.result)
let newa = document.getElementById("new"); //不能命名为new,因为new为关键字
newa.setAttribute("src", this.result)
}
}
}
</script>
补充:当不加 img.crossOrigin = '' 或者 img.crossOrigin = 'Anonymous' 时,我们使用的淘宝服务器上的一张图片,在本地服务器下访问,会出现图片跨域的问题;我们可以把图片放在本地服务器下即可解决上面的跨域问题,比如我现在将淘宝服务器下的图片保存在本地服务器下;如下代码即可解决 var
img =
"http://127.0.0.1/base64/1.jpg"
;