JavaScript: Data URI to image

点击(此处)折叠或打开

<html>
<head>
<title>Data URI to image</title>
<style>
.data-uri{width: 500px; height: 200px;}
.convert-button-wrapper {margin-top: 20px;}
.preview{margin-top: 20px;}
</style>
</head>
<body>
<label>
<p>Data URI:</p>
<textarea id="dataURI" class="data-uri">data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNSAxMCIgd2lkdGg9IjE1IiBoZWlnaHQ9IjEwIj48c3R5bGUgdHlwZT0idGV4dC9jc3MiPi5zdDB7ZmlsbDojRENEQkRCO30gLnN0MXtmaWxsOiNGNEY0RjQ7fTwvc3R5bGU+PGcgaWQ9IkxheWVyXzIiPjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xLjUgMTBsNS45LTggNi4xIDhoMS41bC03LjYtMTAtNy40IDEweiIvPjxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik03LjQgMmwtNS45IDhoMTJ6Ii8+PC9nPjwvc3ZnPg==</textarea>
</label>
<div class="preview">
<image id="dataURIImage" src="" />
</div>
<div class="convert-button-wrapper">
<button class="convert-button" id="convertButton">Convert</button>
</div>
<form>
</form>
<canvas id="imageCanvas"></canvas>
<script>
var dataURIEL = document.getElementById('dataURI');
var dataImage = document.getElementById('dataURIImage');
function previewImage() {
var dataURI = dataURIEL.value;
dataImage.src = dataURI;
}
previewImage();
function convertDataURLToImageData(dataURL) {
if (dataURL !== undefined && dataURL !== null) {
var canvas = document.getElementById('imageCanvas'),
context = canvas.getContext('2d');
canvas.width = dataImage.width;
canvas.height = dataImage.height;
context.drawImage(dataImage, 0, 0, canvas.width, canvas.height);
//saveAs(context.getImageData(0, 0, canvas.width, canvas.height), "abc.png");
//window.open('data:image/png,' + context.getImageData(0, 0, canvas.width, canvas.height));
//img.src = canvas.toDataURL("image/png");
//SaveToDisk(context.getImageData(0, 0, canvas.width, canvas.height), "test.png");
}
}
dataURIEL.onkeyup = previewImage;
document.getElementById('convertButton').onclick = function() {
var dataURI = dataURIEL.value;
convertDataURLToImageData(dataURI);
};
</script>
</body>
</html>

qbq

JavaScript: Data URI to image