作者： admin

购买链接

//重点是transform-origin这个属性，默认作用的重心是元素正中间，需要设置为如下
transform: rotate(0deg);//向右延长
transform-origin: 0% 0%;  

transform: rotate(180deg);//向左延长，仅仅只改变角度即可
transform-origin: 0% 0%;

直接案例：demo

关键还是要通过canvas对象的toDataURL方法去实现

<div id="showme"></div>


let imgSrc = "https://cdnpw.chinaesport.com/kdhxoi/storage/emulated/0/tencent/MicroMsg/WeiXin/mmexport1592366797764.webp";

//width、height调用时传入具体像素值，控制大小 ,不传则默认图像大小
function getBase64Image(img, width, height) {
    var canvas = document.createElement("canvas");
    canvas.width = width ? width : img.width;
    canvas.height = height ? height : img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
    var dataURL = canvas.toDataURL();
    return dataURL; //返回base64
}




function getCanvasBase64(img) {
    var image = new Image();
    //至关重要
    image.crossOrigin = '';
    image.src = img;
    //至关重要
    var deferred = $.Deferred();
    if (img) {
        image.onload = function () {
            console.log(image) //将<img crossorigin="" src="xx.webp">值传给canvas处理
            deferred.resolve(getBase64Image(image));//将base64传给done上传处理
        }
        return deferred.promise();//问题要让onload完成后再return sessionStorage['imgTest']
    }
}

//调用
getCanvasBase64(imgSrc)
    .then(function (base64) {
        // 这里拿到的是转换后的base64地址，可以做其他操作
        // console.log("方式二》》》》》》》》》",base64);
        $('<img src="'+base64+'">').appendTo('#showme')
    }, function (err) {
        console.log(err);
    });

function test(url){
 var str=undefined;
 var img =new Image()
 img.src=url
 img.onload=function(){
   str=img
 }
 return str
}

事实上test()直接就返回了undefined，说明onload要等待img资源都加再完成了才能执行，不能保证同步执行

解决方法一：

基于jQuery兼容性好

function test(url){
    var img =new Image();
    img.title='xxxx';
    img.src=url;
    var deferred = $.Deferred();
    img.onload=function () {
       deferred.resolve(img);
    }
    return deferred.promise();
}

//图片地址加载有延迟
test('http://lorempixel.com/100/100?0.6412381180562079').then((res)=>{
    console.log(res)  //<img title="xxxx" src="http://lorempixel.com/100/100?0.6412381180562079">
})

解决方法二：

不需要任何第三方插件

function test(url){
    return new Promise(function (a,b) {
            var img =new Image();
            img.title='xxxx';
            img.src=url;
            img.onload=function () {
                a(img)
            }
    })
}

test('http://lorempixel.com/100/100?0.6412381180562079').then((res)=>{
    console.log(res)
})