<!DOCTYPE html>
<html id ="html1" lang="en" style="position:absolute;left:0px;top:0px;right:0px;bottom:0px">
<head>
<script type="text/javascript">
var img = new Image();
var XX = 0;
var doing = 0;
$(document).ready(function () {
Inicanvas();//初始化绘图
});
function Inicanvas() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
}
function LoadUrl() {
var mm = prompt("清输入图片地址", "
");
LoadPic(mm);
}
function LoadPic(url) {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.clearRect(0, 0, canvas.width, canvas.height);
img.src = url;
canvas.width =document.body.clientWidth;
canvas.height = img.height ;
img.onload = function () {
context.drawImage(img, 0, 0, img.width * canvas.height / img.height, canvas.height);
};
}
function ChangeX(){
if (XX == 0) { XX = 1 } else { XX = 0 };
}
function kk(x) {
var per;
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.clearRect(0, 0, canvas.width, canvas.height);
//context.drawImage(img, 0, 0, img.width * canvas.height / img.height, canvas.height);
per = canvas.height / img.height;
var wd = img.width * per;
var ht = canvas.height;
if (XX == 0) {
context.drawImage(img, 0, 0, x/per, img.height, 0, 0, x, ht);
context.translate(img.width * per, 0);
context.scale(-1, 1);
context.drawImage(img, 0, 0, x / per, img.height, wd-x*2, 0, x, ht);
context.setTransform(1, 0, 0, 1, 0, 0);
}
else {
context.translate(img.width * per, 0);
context.scale(-1, 1);
context.drawImage(img, img.width - x / per, 0, img.width, img.height, wd - x, 0, wd, ht);
context.setTransform(1, 0, 0, 1, 0, 0);
context.drawImage(img, img.width - x / per, 0, img.width, img.height, x, 0, wd, ht);
}
}
function Downloadimg(){
var canvas = document.getElementById("canvas");
var url = canvas.toDataURL("image/png")
var bob = dataURLtoBlob(url)
openDownloadDialog(bob,'123.png')
}
function dataURLtoBlob(dataurl) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
}
function openDownloadDialog(url, saveName)
{
if(typeof url == 'object' && url instanceof Blob)
{
url = URL.createObjectURL(url); // 创建blob地址
}
var aLink = document.createElement('a');
aLink.href = url;
aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
var event;
if(window.MouseEvent) event = new MouseEvent('click');
else
{
event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
}
aLink.dispatchEvent(event);
}
</script>
<style type="text/css">
#canvas {
border: 1px solid #ADACB0;
display: block;
margin: 0px auto;
}
</style>
</head>
<input type="button" value="打开图片" onclick="LoadUrl()" />
<input name="Fruit" type="checkbox" value="" onclick="ChangeX()" />反转图片 </input>
<input type="button" value="保存文件请直接点击右键保存" onClick = "Downloadimg()">
<canvas id="canvas" tabindex="0">
你的浏览器还不支持canvas
</canvas>
<script type="text/javascript">
canvas.onclick = function (e) {
kk(e.offsetX);
}
canvas.onmousedown = function (e) {
doing = 1;
}
canvas.onmouseup = function (e) {
doing = 0;
}
canvas.onmousemove = function (e) {
if (doing == 1) { kk(e.offsetX) };
}
</script>
<html id ="html1" lang="en" style="position:absolute;left:0px;top:0px;right:0px;bottom:0px">
<head>
<script type="text/javascript">
var img = new Image();
var XX = 0;
var doing = 0;
$(document).ready(function () {
Inicanvas();//初始化绘图
});
function Inicanvas() {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
}
function LoadUrl() {
var mm = prompt("清输入图片地址", "
");
LoadPic(mm);
}
function LoadPic(url) {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.clearRect(0, 0, canvas.width, canvas.height);
img.src = url;
canvas.width =document.body.clientWidth;
canvas.height = img.height ;
img.onload = function () {
context.drawImage(img, 0, 0, img.width * canvas.height / img.height, canvas.height);
};
}
function ChangeX(){
if (XX == 0) { XX = 1 } else { XX = 0 };
}
function kk(x) {
var per;
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.clearRect(0, 0, canvas.width, canvas.height);
//context.drawImage(img, 0, 0, img.width * canvas.height / img.height, canvas.height);
per = canvas.height / img.height;
var wd = img.width * per;
var ht = canvas.height;
if (XX == 0) {
context.drawImage(img, 0, 0, x/per, img.height, 0, 0, x, ht);
context.translate(img.width * per, 0);
context.scale(-1, 1);
context.drawImage(img, 0, 0, x / per, img.height, wd-x*2, 0, x, ht);
context.setTransform(1, 0, 0, 1, 0, 0);
}
else {
context.translate(img.width * per, 0);
context.scale(-1, 1);
context.drawImage(img, img.width - x / per, 0, img.width, img.height, wd - x, 0, wd, ht);
context.setTransform(1, 0, 0, 1, 0, 0);
context.drawImage(img, img.width - x / per, 0, img.width, img.height, x, 0, wd, ht);
}
}
function Downloadimg(){
var canvas = document.getElementById("canvas");
var url = canvas.toDataURL("image/png")
var bob = dataURLtoBlob(url)
openDownloadDialog(bob,'123.png')
}
function dataURLtoBlob(dataurl) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], { type: mime });
}
function openDownloadDialog(url, saveName)
{
if(typeof url == 'object' && url instanceof Blob)
{
url = URL.createObjectURL(url); // 创建blob地址
}
var aLink = document.createElement('a');
aLink.href = url;
aLink.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
var event;
if(window.MouseEvent) event = new MouseEvent('click');
else
{
event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
}
aLink.dispatchEvent(event);
}
</script>
<style type="text/css">
#canvas {
border: 1px solid #ADACB0;
display: block;
margin: 0px auto;
}
</style>
</head>
<input type="button" value="打开图片" onclick="LoadUrl()" />
<input name="Fruit" type="checkbox" value="" onclick="ChangeX()" />反转图片 </input>
<input type="button" value="保存文件请直接点击右键保存" onClick = "Downloadimg()">
<canvas id="canvas" tabindex="0">
你的浏览器还不支持canvas
</canvas>
<script type="text/javascript">
canvas.onclick = function (e) {
kk(e.offsetX);
}
canvas.onmousedown = function (e) {
doing = 1;
}
canvas.onmouseup = function (e) {
doing = 0;
}
canvas.onmousemove = function (e) {
if (doing == 1) { kk(e.offsetX) };
}
</script>
