canvas改变图片原始尺寸

原理：确定canvas画布大小，将图片画到画布上，然后导出图片，就这么简单

画布大小，需要得到原始图片宽高比例，然后选择画布的宽计算出高

代码：

<div class="imagehandler_setting"><span class="imagehandler_chooseFile">选择文件</span><input id="upload-input" type="file" accept="image/*" style="display: none;"><div class="setting_size" style="display:none;"><span class="imagehandler_download">下载</span><div class="setting_size_choose">选择尺寸：<select name="" id=""><option value="0">原大小</option><option value="16">16*16</option><option value="32">32*32</option><option value="64">64*64</option><option value="80">80*80</option><option value="100">100*100</option><option value="120">120*120</option><option value="128">128*128</option><option value="256">256*256</option><option value="512">512*512</option></select></div><div class="custom_size"><div class="custom_size_inp">自定义宽：<input type="text" class="custom_width">自定义高：<input type="text" class="custom_height"></div><p class="sizeTips" style="display: none;">建议高：<span>500</span></p></div><div class="imagehandler_btn">开始处理</div></div>
</div>
<img src="" alt="" id="hideImg" style="display: none;">
<div class="img_result" style="display: none;"><img src="" alt="">
</div>

处理：

var s_handlerWidth;    //图片原始宽
var s_handlerHeight;   //图片原始高
var handlerWidth;    //图片宽
var handlerHeight;   //图片高
var scale;           //宽高比例
var imgFile;
var downloadBase;
var fileName;

//图片选择
$("#upload-input").change(function(e){imgFile = e.target.files[0];var reader = new FileReader();fileName = imgFile.name;var img = document.createElement('img');reader.onload = function (e) {img.src = e.target.result;img.onload = function () {$(".setting_size").show();handlerWidth = this.width;handlerHeight = this.height;s_handlerWidth = this.width;s_handlerHeight = this.height;scale = (handlerWidth / handlerHeight).toFixed(2);//原图宽高比例handerImg(imgFile,handlerWidth,handlerHeight)}}reader.readAsDataURL(imgFile);})//自定义宽输入$(".custom_width").bind("input propertychange",function(e){var custom_width = $(this).val();$(".sizeTips").show();if(custom_width.length==0){$(".sizeTips").hide();}$(".sizeTips span").text((custom_width/scale).toFixed(0))handlerWidth = custom_width;})//处理自定义宽高$(".imagehandler_btn").click(function(){var _w = $(".custom_width").val();var _h = $(".custom_height").val();if(_w>0&&_h>0){handerImg(imgFile,_w,_h)}})//选择默认尺寸$(".setting_size_choose select").change(function(){var imgWidthsize = $(this).find("option:selected").val();var imgHeightsize = (imgWidthsize/scale).toFixed(0)if(imgWidthsize == 0){imgWidthsize = s_handlerWidth;imgHeightsize = s_handlerHeight;}handerImg(imgFile,imgWidthsize,imgHeightsize)})$(".imagehandler_download").click(function(){downLoad(downloadBase,fileName)})// 拖拽文件var dp = document.querySelector( '#dropZone' );document.addEventListener('drop', function (e) {e.preventDefault()}, false)document.addEventListener('dragover', function (e) {e.preventDefault()}, false)if(dp==null){return;}dp.addEventListener('dragover', function(e) {e.stopPropagation();e.preventDefault();e.dataTransfer.dropEffect = '导入';});dp.addEventListener("drop", function(e) {e.stopPropagation();e.preventDefault();var file = e.dataTransfer.files;imgFile = file[0];var _fileName = file[0].name;fileName = _fileName;var fileType = _fileName.substring(_fileName.lastIndexOf(".") + 1).toLowerCase();var fileFlag;if(file.length>1){alert("文件只能单个上传")}else{if(fileType!=="png"&&fileType!=="jpg"&&fileType!=="webp"&&fileType!=="gif"&&fileType!=="jpeg"&&fileType!=="bmp"){alert("请上传图片格式")}else{var reader = new FileReader();var img = document.createElement('img');reader.onload = function (e) {img.src = e.target.result;img.onload = function () {$(".setting_size").show();handlerWidth = this.width;handlerHeight = this.height;s_handlerWidth = this.width;s_handlerHeight = this.height;scale = (handlerWidth / handlerHeight).toFixed(2);//原图宽高比例handerImg(imgFile,handlerWidth,handlerHeight)}}reader.readAsDataURL(imgFile);}}});

关键方法：

//画图
function handerImg(file,width,height){var reader = new FileReader();var img = document.createElement('img');reader.onload = function (e) {img.src = e.target.result;img.onload = function () {var canvas = document.createElement('canvas');var context = canvas.getContext('2d');canvas.width = width;//canvas的宽=图片的宽canvas.height = height;//canvas的高=图片的高context.clearRect(0, 0, width, height)//清理canvascontext.drawImage(img, 0, 0, width, height)//canvas绘图var newUrl = canvas.toDataURL('image', 1);//canvas导出成为base64downloadBase = newUrl;$(".img_result img").attr("src",newUrl)$(".img_result").show();}}reader.readAsDataURL(file);}
//下载function dataURIToBlob(dataURI) {var binStr = atob(dataURI.split(',')[1]),len = binStr.length,arr = new Uint8Array(len);for (var i = 0; i < len; i++) {arr[i] = binStr.charCodeAt(i);}return new Blob([arr])}function downLoad(base,name){const bloburl = dataURIToBlob(base)var downloadElement = document.createElement("a");downloadElement.href =  URL.createObjectURL(bloburl);downloadElement.download = name; //下载后文件名document.body.appendChild(downloadElement);downloadElement.click(); //点击下载document.body.removeChild(downloadElement); //下载完成移除元素window.URL.revokeObjectURL(downloadElement.href); //释放掉blob对象}

看懂画图函数就可以了。

canvas改变图片原始尺寸相关推荐

javascript 获取图片原始尺寸
javascript 获取图片原始尺寸 1 function getImgInfo(url){ 2 var img = new Image(), loaded = false; 3 var info ...
php header()改变图片尺寸,PHP改变图片的尺寸大小方法实例
本文主要和大家分享,PHP改变图片的尺寸大小方法实例,希望能帮助到大家. 改变图片的尺寸是一个很常见的功能需求,下面开始研究下关于PHP改变图片尺寸的方法.先介绍一个自己写的函数.01<?php ...
怎么改变图片的尺寸大小？图片大小如何修改？
手机像素越来越高,拍摄出来的照片尺寸也越来越大,经常因为图片尺寸过大而导致照片无法上传,所以需要做一些图片大小修改.可以使用压缩图的图片改大小(在线修改图片尺寸大小工具-压缩图)功能来处理,而且这是一 ...
python批量resize图片大小_python opencv 批量改变图片的尺寸大小的方法
我目标文件夹下有一大批图片,我要把它转变为指定尺寸大小的图片,用pthon和opencv实现的. 以上为原图片. import cv2 import os # 按指定图像大小调整尺寸 def resi ...
用java代码改变图片的尺寸
根据图片的路径,读取图片,并改变成指定的尺寸 /*** 改变图片的尺寸** @param newWidth, newHeight, path* @return boolean*/public bool ...
CSDN：改变图片的尺寸
上传一帧原图,其尺寸为:840*525,图片链接为:![在这里插入图片描述](https://img-blog.csdnimg.cn/20190503173346175.jpg) 为改变图片的尺寸,如 ...
如何改变图片的尺寸大小得到一张缩小后的图片
声明:本篇博客和代码无关,请不要误解. 在平时开发过程中,总会需要一些特定大小的图片,一般设计师会给我们提供,但是有时候我们有一张大图,只是想得到一张它的缩小版,我们还让设计师帮我们,虽然也可以,但是 ...
分享一个js获取图片原始尺寸的方法。亲测，好用！！！
首先,大部分人和网上能搜索到的获取图片分辨率或尺寸的方法,应该都是这样: let url = 'url';function getUrlInfo(url) {let image = new Image ...
marsonic 瀑布流问题获取js图片原始尺寸的方法
查看issue: const MyCard = ({width, data: {image}}) => {return <img width={(image.width / width) ...
python批量改变图片尺寸
前言我们常常需要批量改变图片的尺寸,使用下面的代码可以根据需要批量进行修改,只需要替换文件路径和想修改的尺寸即可. 这里使用resize改变尺寸是利用pillow包中Image类中的resi ...

canvas改变图片原始尺寸

canvas改变图片原始尺寸相关推荐

最新文章

热门文章