JSHTML图片显示Canvas压缩功能_html2canvas压缩图片资源-CSDN文库

canvas

filereader

182 浏览量 2020-12-29 05:41:45 上传评论收藏 45KB PDF 举报

资源推荐

资源详情

资源评论

JS HTML图片显示图片显示Canvas 压缩功能压缩功能

简单到延伸

最新需要js 文件压缩图片上传以前没搞过，新手把学习过程分享

一一.选择图片并显示选择图片并显示

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<body>

</div>

</body>

window.URL=window.URL||window.webkitURL;

var divimg1 = document.getElementById("img1");

function showImg(obj){

var files = obj.files;

var img = new Image();

img.width = 100;

if(window.URL){

img.src = window.URL.createObjectURL(files[0]);

}else{

//opera不支持createObjectURL/revokeObjectURL方法。需要用FileReader对象来处理

var reader = new FileReader();

reader.readAsDataURL(files[0]);

reader.onload = function(e){

img.src = this.result;

img.width = 200;

img.id="img01";

divimg1.appendChild(img);

}

img.id="img01";

divimg1.appendChild(img);

}

</script>

</html>

二二.使用使用canvas代码代码

<!DOCTYPE html>

<head>

<title>Title</title>

</head>

<body>

</div>

</body>

window.URL=window.URL||window.webkitURL;

var divimg1 = document.getElementById("img1");

var convas = document.getElementById("convas01");

var ht = convas01.getContext("2d");

convas.width = 200;

convas.height = 200;

function showImg(obj){

var files = obj.files;

var img = new Image();

img.width = 200;

if(window.URL){

img.src = window.URL.createObjectURL(files[0]);

img.onload = function(e){

window.URL.revokeObjectURL(this.src);//方便引用无效回收

ht.clearRect(0, 0, convas.width, convas.width);//clearRect() 方法清空给定矩形内的指定像素。

ht.drawImage(img,0,0,convas.width,convas.height);

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

评论收藏

内容反馈

weixin_38661128

粉丝: 4
资源: 884

JS HTML图片显示Canvas 压缩功能

最新资源

JS HTML图片显示Canvas 压缩功能

使用canvas压缩图片大小的方法示例

canvas压缩图片并展示缩略图

html2canvas.zip

canvas图片压缩base64位上传

html5 canvas 图片压缩

html2canvas.js 下载

html5 js 图片压缩

html2canvas生成图片demo.zip

纯 Js 结合 Canvas 实现图片压缩

图片上传 图片压缩 上传压缩 HTML+JS

JS和Canvas实现图片的预览压缩和上传功能

Js利用Canvas实现图片压缩功能

JS移动端/H5同时选择多张图片上传并使用canvas压缩图片

html2canvas.min.js

html2canvas-rc4.js和html2canvas.min.js

基于canvas应用在移动端的前端图片压缩

采用canvas截取上传视频的图片

【JavaScript源代码】Vue使用canvas实现图片压缩上传.docx

canvas压缩图片

ribbonjs使用HTML5canvas生成色带JS库

html2canvas.min.js + FileSaver.min.js + jszip.min.js

daycaca一款基于canvas图片处理类库它可以帮助你处理图片的压缩裁剪等

解决htmlcanvas手机无法截图或者截图不全的问题

Qt 5实现串口调试助手 （源工程文件、0积分下载）

【SystemVerilog】路科验证V2学习笔记（全600页）.pdf

AutoSAR标准协议4.2.2

光伏-储能并网系统仿真.rar

最新资源

图片上传图片压缩上传压缩 HTML+JS

Qt 5实现串口调试助手（源工程文件、0积分下载）