canvas压缩图片，canvas,css结合绘制方形图片
时间：2023-04-02 18:12:53
HTML
//------------压缩图片函数compress(imgPath){varimage=newImage();//新建一个img标签（还没有嵌入DOM节点）image.src=imgPath;image.onload=function(){varcanvas=document.createElement('canvas');varcontext=canvas.getContext('2d');varimageWidth=image.width/3;//图片压缩后的大小varimageHeight=image.height/3;变种数据='';canvas.width=图像宽度；canvas.height=imageHeight;context.drawImage(image,0,0,imageWidth,imageHeight);data=canvas.toDataURL('image/jpeg')//压缩完成$(".srcDiscernImg").attr("src",data);console.log("正在渲染...");}}//------------canvas,css结合绘制正方形图片html
css.proimg-search-top.l-search-img{width:140px;height:140px;margin-bottom:10px;position:relative;background-color:#fff;}.proimg-search-top.l-search-imgimg{position:absolute;left:50%;top:50%;-moz-transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%)}js//绘制图片并在div中显示为正方形varsearchImgPath='获取图片地址';varsearchImgSize="140";//要生成的正??方形的大小compress(searchImgPath,searchImgSize);//绘制图像并在div函数中显示为正方形compress(imgPath,maxSize){varimage=newImage();//创建一个新的img标签（DOM节点还没有嵌入）image.src=imgPath;image.onload=function(){varcanvas=document.createElement('canvas');varcontext=canvas.getContext('2d');varimageWidth=image.width;//图像压缩后的大小varimageHeight=image.height;if(imageWidth>imageHeight){//水平图像varimgSize=imageWidth/imageHeight;图片宽度=最大尺寸；imageHeight=imageWidth/imgSize;}elseif(imageWidth
