社區(qū)精選｜前端實(shí)現(xiàn)圖片旋轉(zhuǎn)功能

orientation = 0 // 0    orientation = 3 // 180    orientation = 8 // 270    orientation = 6 // 90if (orientation === 6) {        canvas4.width = canvas1.height;        canvas4.height = canvas1.width;        ctx4.rotate(Math.PI / 2);        ctx4.drawImage(canvas1, 0, -canvas1.height);    } else if (orientation === 3) {        canvas4.width = canvas1.width;        canvas4.height = canvas1.height;        ctx4.rotate(Math.PI);        ctx4.drawImage(canvas1, -canvas1.width, -canvas1.height);    } else if (orientation === 8) {        canvas4.width = canvas1.height;        canvas4.height = canvas1.width;        ctx4.rotate(-Math.PI / 2);        ctx4.drawImage(canvas1, -canvas1.width, 0);    } else {// 如果沒(méi)有旋轉(zhuǎn)，直接繪制圖片        canvas4.width = canvas1.width;        canvas4.height = canvas1.height;        ctx4.drawImage(canvas1, 0, 0);    }

<canvas id="canvas5"></canvas><script>var context = canvas5.getContext('2d');    canvas5.width=canvas1.height;    canvas5.height=canvas1.width;var width = canvas5.width;var height = canvas5.height;// 先位移坐標(biāo)到中心    context.translate(width / 2, height / 2);// 旋轉(zhuǎn)90度    context.rotate(90 * Math.PI / 180);// 此時(shí)按照旋轉(zhuǎn)后的尺寸// 把定位中心移動(dòng)到左上角    context.translate(-1 * height / 2, -1 * width / 2);// 繪制圖片    context.drawImage(canvas1, 0, 0, height, width);// 坐標(biāo)系還原到初始    context.setTransform(1, 0, 0, 1, 0, 0);</script>

function handleFileSelect(Orientation = 1,file) {console.log('file', file)var zeroth = {};var exif = {};var gps = {};    zeroth[piexif.ImageIFD.Make] = "Make";    zeroth[piexif.ImageIFD.XResolution] = [777, 1];    zeroth[piexif.ImageIFD.YResolution] = [777, 1];    zeroth[piexif.ImageIFD.Software] = "Piexifjs";    exif[piexif.ExifIFD.DateTimeOriginal] = "2010:10:10 10:10:10";    exif[piexif.ExifIFD.LensMake] = "LensMake";    exif[piexif.ExifIFD.Sharpness] = 777;    exif[piexif.ExifIFD.LensSpecification] = [[1, 1], [1, 1], [1, 1], [1, 1]];    gps[piexif.GPSIFD.GPSVersionID] = [7, 7, 7, 7];    gps[piexif.GPSIFD.GPSDateStamp] = "1999:99:99 99:99:99";var exifObj = {"0th":zeroth, "Exif":exif, "GPS":gps};   // 獲取當(dāng)前圖片的方向值（通常在 '0th' IFD 中）// 設(shè)置新的方向值，例如將方向設(shè)置為正常（1）    exifObj['0th'][piexif.ImageIFD.Orientation] = Orientation;//正常// exifObj['0th'][piexif.ImageIFD.Orientation] = 2;//var exifStr = piexif.dump(exifObj);
var reader = new FileReader();    reader.onload = function(e) {var inserted = piexif.insert(exifStr, e.target.result);
var image = new Image();        image.src = inserted;// image.width = 200;
var el = document.createElement('div');        el.style.border='1px solid #0cc'        el.style.padding = '20px'        el.innerHTML = Orientation        el.appendChild(image);document.body.appendChild(el);
    };    reader.readAsDataURL(file);}
canvas1.toBlob(handleFileSelect.bind(window,1), 'image/jpeg')canvas1.toBlob(handleFileSelect.bind(window,2), 'image/jpeg')canvas1.toBlob(handleFileSelect.bind(window,3), 'image/jpeg')canvas1.toBlob(handleFileSelect.bind(window,4), 'image/jpeg')canvas1.toBlob(handleFileSelect.bind(window,5), 'image/jpeg')canvas1.toBlob(handleFileSelect.bind(window,6), 'image/jpeg')canvas1.toBlob(handleFileSelect.bind(window,7), 'image/jpeg')canvas1.toBlob(handleFileSelect.bind(window,8), 'image/jpeg')