将 canvas 中调整大小的图像导出到新的 JSZip 包
Export resized image in canvas to new JSZip package
我可以将图像加载到 canvas 元素中并调整其大小,但我无法获取调整后的图像:
var logo = $(".logo"),
loader = $(".load"),
canvas = $(".holder"),
ctx = canvas[0].getContext("2d");
function displayPreview(file) {
var reader = new FileReader();
reader.onload = function(e) {
var img = new Image();
img.src = e.target.result;
img.onload = function() {
// x, y, width, height
ctx.drawImage(img, 0, 0, 128, 128);
var dataURL = canvas[0].toDataURL("image/png");
var logo = $(".logo");
var imgUrl = dataURL;
var imgz = $("<img>");
imgz.attr("src", imgUrl);
logo.html("");
logo.append(imgz);
};
};
reader.readAsDataURL(file);
}
进入jszip的下载打包功能
// Download Zip
$(".download").on("click", function(imgUrl) {
var zip = new JSZip();
zip.file("logo.png", imgUrl);
var content = zip.generate({type:"blob"});
// see FileSaver.js
saveAs(content, "test.zip");
});
片段:
var logo = $(".logo"),
loader = $(".load"),
canvas = $(".holder"),
ctx = canvas[0].getContext("2d");
function displayPreview(file) {
var reader = new FileReader();
reader.onload = function(e) {
var img = new Image();
img.src = e.target.result;
img.onload = function() {
// x, y, width, height
ctx.drawImage(img, 0, 0, 128, 128);
var dataURL = canvas[0].toDataURL("image/png");
var logo = $(".logo");
var imgUrl = dataURL;
var imgz = $("<img>");
imgz.attr("src", imgUrl);
logo.html("");
logo.append(imgz);
};
};
reader.readAsDataURL(file);
}
$(document).ready(function() {
loader.on("change", function(evt) {
var file = evt.target.files[0];
displayPreview(file);
var reader = new FileReader();
reader.onload = function(e) {
// Download Zip
$(".download").on("click", function(imgUrl) {
var zip = new JSZip();
zip.file("logo.png", imgUrl);
var content = zip.generate({type:"blob"});
// see FileSaver.js
saveAs(content, "test.zip");
});
return false;
};
reader.readAsArrayBuffer(file);
});
// Trigger Load Image
$(".trigload").click(function() {
$("input").trigger("click");
});
});
@import url("http://necolas.github.io/normalize.css/3.0.1/normalize.css");
.hide {
display: none;
}
.logo {
text-align: center;
}
.fill {
width: 100%;
}
.fr {
float: right;
}
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://stuk.github.io/jszip/dist/jszip.min.js"></script>
<script type="text/javascript" src="http://stuk.github.io/jszip-utils/dist/jszip-utils.js"></script>
<script type="text/javascript" src="http://stuk.github.io/jszip/vendor/FileSaver.js"></script>
<input type="file" class="hide load">
<a class="trigload" href="javascript:void(0)">Load Image</a>
<a class="download fr" href="javascript:void(0)">Download</a>
<div class="logo"></div>
<div class="fill" align="center">
<canvas class="holder" width="128" height="128"></canvas>
</div>
为了让 JSZip 将您的 dataURL 正确保存到有效的 png 文件,您似乎需要添加一个包含 {base64: true}
作为 zip.file()
方法的第三个参数的对象,并删除data:image/png;base64,
来自 dataURL。
此外,您将点击事件分配给 imgUrl
变量。您可能希望将其存储在全局变量中,或者检查 $('.logo>img')[0].src
或再次调用 canvas[0].toDataURL()
.
var logo = $(".logo"),
loader = $(".load"),
canvas = $(".holder"),
ctx = canvas[0].getContext("2d");
function displayPreview(file) {
var reader = new FileReader();
reader.onload = function(e) {
var img = new Image();
img.src = e.target.result;
img.onload = function() {
// x, y, width, height
ctx.drawImage(img, 0, 0, 128, 128);
var dataURL = canvas[0].toDataURL("image/png");
var logo = $(".logo");
var imgUrl = dataURL;
var imgz = $("<img>");
imgz.attr("src", imgUrl);
logo.html("");
logo.append(imgz);
};
};
reader.readAsDataURL(file);
}
$(document).ready(function() {
loader.on("change", function(evt) {
var file = evt.target.files[0];
displayPreview(file);
var reader = new FileReader();
reader.onload = function(e) {
// Download Zip
$(".download").on("click", function() {
var imgUrl = canvas[0].toDataURL();
var zip = new JSZip();
zip.file("logo.png", imgUrl.split('base64,')[1],{base64: true});
var content = zip.generate({type:"blob"});
// see FileSaver.js
saveAs(content, "test.zip");
});
return false;
};
reader.readAsArrayBuffer(file);
});
// Trigger Load Image
$(".trigload").click(function() {
$("input").trigger("click");
});
});
@import url("http://necolas.github.io/normalize.css/3.0.1/normalize.css");
.hide {
display: none;
}
.logo {
text-align: center;
}
.fill {
width: 100%;
}
.fr {
float: right;
}
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://stuk.github.io/jszip/dist/jszip.min.js"></script>
<script type="text/javascript" src="http://stuk.github.io/jszip-utils/dist/jszip-utils.js"></script>
<script type="text/javascript" src="http://stuk.github.io/jszip/vendor/FileSaver.js"></script>
<input type="file" class="hide load">
<a class="trigload" href="javascript:void(0)">Load Image</a>
<a class="download fr" href="javascript:void(0)">Download</a>
<div class="logo"></div>
<div class="fill" align="center">
<canvas class="holder" width="128" height="128"></canvas>
</div>
2022 编辑
JSZip 现在直接接受 Blob 作为输入,因此最好将 canvas 转换为 Blob 并将其直接传递给 JSZip。 (As a fiddle 因为 StackSnippets 不允许下载)。
我可以将图像加载到 canvas 元素中并调整其大小,但我无法获取调整后的图像:
var logo = $(".logo"),
loader = $(".load"),
canvas = $(".holder"),
ctx = canvas[0].getContext("2d");
function displayPreview(file) {
var reader = new FileReader();
reader.onload = function(e) {
var img = new Image();
img.src = e.target.result;
img.onload = function() {
// x, y, width, height
ctx.drawImage(img, 0, 0, 128, 128);
var dataURL = canvas[0].toDataURL("image/png");
var logo = $(".logo");
var imgUrl = dataURL;
var imgz = $("<img>");
imgz.attr("src", imgUrl);
logo.html("");
logo.append(imgz);
};
};
reader.readAsDataURL(file);
}
进入jszip的下载打包功能
// Download Zip
$(".download").on("click", function(imgUrl) {
var zip = new JSZip();
zip.file("logo.png", imgUrl);
var content = zip.generate({type:"blob"});
// see FileSaver.js
saveAs(content, "test.zip");
});
片段:
var logo = $(".logo"),
loader = $(".load"),
canvas = $(".holder"),
ctx = canvas[0].getContext("2d");
function displayPreview(file) {
var reader = new FileReader();
reader.onload = function(e) {
var img = new Image();
img.src = e.target.result;
img.onload = function() {
// x, y, width, height
ctx.drawImage(img, 0, 0, 128, 128);
var dataURL = canvas[0].toDataURL("image/png");
var logo = $(".logo");
var imgUrl = dataURL;
var imgz = $("<img>");
imgz.attr("src", imgUrl);
logo.html("");
logo.append(imgz);
};
};
reader.readAsDataURL(file);
}
$(document).ready(function() {
loader.on("change", function(evt) {
var file = evt.target.files[0];
displayPreview(file);
var reader = new FileReader();
reader.onload = function(e) {
// Download Zip
$(".download").on("click", function(imgUrl) {
var zip = new JSZip();
zip.file("logo.png", imgUrl);
var content = zip.generate({type:"blob"});
// see FileSaver.js
saveAs(content, "test.zip");
});
return false;
};
reader.readAsArrayBuffer(file);
});
// Trigger Load Image
$(".trigload").click(function() {
$("input").trigger("click");
});
});
@import url("http://necolas.github.io/normalize.css/3.0.1/normalize.css");
.hide {
display: none;
}
.logo {
text-align: center;
}
.fill {
width: 100%;
}
.fr {
float: right;
}
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://stuk.github.io/jszip/dist/jszip.min.js"></script>
<script type="text/javascript" src="http://stuk.github.io/jszip-utils/dist/jszip-utils.js"></script>
<script type="text/javascript" src="http://stuk.github.io/jszip/vendor/FileSaver.js"></script>
<input type="file" class="hide load">
<a class="trigload" href="javascript:void(0)">Load Image</a>
<a class="download fr" href="javascript:void(0)">Download</a>
<div class="logo"></div>
<div class="fill" align="center">
<canvas class="holder" width="128" height="128"></canvas>
</div>
为了让 JSZip 将您的 dataURL 正确保存到有效的 png 文件,您似乎需要添加一个包含 {base64: true}
作为 zip.file()
方法的第三个参数的对象,并删除data:image/png;base64,
来自 dataURL。
此外,您将点击事件分配给 imgUrl
变量。您可能希望将其存储在全局变量中,或者检查 $('.logo>img')[0].src
或再次调用 canvas[0].toDataURL()
.
var logo = $(".logo"),
loader = $(".load"),
canvas = $(".holder"),
ctx = canvas[0].getContext("2d");
function displayPreview(file) {
var reader = new FileReader();
reader.onload = function(e) {
var img = new Image();
img.src = e.target.result;
img.onload = function() {
// x, y, width, height
ctx.drawImage(img, 0, 0, 128, 128);
var dataURL = canvas[0].toDataURL("image/png");
var logo = $(".logo");
var imgUrl = dataURL;
var imgz = $("<img>");
imgz.attr("src", imgUrl);
logo.html("");
logo.append(imgz);
};
};
reader.readAsDataURL(file);
}
$(document).ready(function() {
loader.on("change", function(evt) {
var file = evt.target.files[0];
displayPreview(file);
var reader = new FileReader();
reader.onload = function(e) {
// Download Zip
$(".download").on("click", function() {
var imgUrl = canvas[0].toDataURL();
var zip = new JSZip();
zip.file("logo.png", imgUrl.split('base64,')[1],{base64: true});
var content = zip.generate({type:"blob"});
// see FileSaver.js
saveAs(content, "test.zip");
});
return false;
};
reader.readAsArrayBuffer(file);
});
// Trigger Load Image
$(".trigload").click(function() {
$("input").trigger("click");
});
});
@import url("http://necolas.github.io/normalize.css/3.0.1/normalize.css");
.hide {
display: none;
}
.logo {
text-align: center;
}
.fill {
width: 100%;
}
.fr {
float: right;
}
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://stuk.github.io/jszip/dist/jszip.min.js"></script>
<script type="text/javascript" src="http://stuk.github.io/jszip-utils/dist/jszip-utils.js"></script>
<script type="text/javascript" src="http://stuk.github.io/jszip/vendor/FileSaver.js"></script>
<input type="file" class="hide load">
<a class="trigload" href="javascript:void(0)">Load Image</a>
<a class="download fr" href="javascript:void(0)">Download</a>
<div class="logo"></div>
<div class="fill" align="center">
<canvas class="holder" width="128" height="128"></canvas>
</div>
2022 编辑
JSZip 现在直接接受 Blob 作为输入,因此最好将 canvas 转换为 Blob 并将其直接传递给 JSZip。 (As a fiddle 因为 StackSnippets 不允许下载)。