canvas做的图片查看器1

发布时间:2020-08-06 15:56:49 作者:素颜猪
来源:网络 阅读:437

效果图

canvas做的图片查看器1

html结构

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title>Canvas</title>

<link rel="stylesheet" href="">

<style>

body{

background-color: #000;

}


#canvas{

display: block;

margin: 0 auto;

border: 1px solid #aaa;

}


.range-style{

display: block;

margin: 20px auto;

width: 800px;

}


.watermark-canvas-style{

display: block;

margin: 0 auto;

border: 1px solid #aaa;

}

</style>

</head>

<body>

<canvas id="canvas"></canvas>

<input type="range" class="range-style" id="scale-range" min="0.5" max="3.0" step = "0.01" value="0.5">

<canvas id="watermark-canvas" class="watermark-canvas-style"></canvas>

</body>

</html>

js脚本

<script>

var canvas = document.getElementById("canvas");

var slider = document.getElementById("scale-range");

var watermarkCanvas = document.getElementById("watermark-canvas");


var context = canvas.getContext("2d");

var watermarkContext = watermarkCanvas.getContext("2d");


var image = new Image();


window.onload = function(){

canvas.width = 600;

canvas.height = 450;


var scale = slider.value;

console.log(scale);


image.src = "20170122161717.png";

image.onload = function(){

// context.drawImage(image,0,0,canvas.width,canvas.height);

drawImageByScale(scale);


slider. = function(){

scale = slider.value;

drawImageByScale(scale);

}

}


watermarkCanvas.width = 500;

watermarkCanvas.height = 100;


watermarkContext.font = "bold 50px Arial";

watermarkContext.fillStyle = "rgba(255,255,255,0.5)";

watermarkContext.textBaseline = "middle";

watermarkContext.fillText("%:)%yunshuo%:)%",20,50);

}



function drawImageByScale(scale){

var imageWidth = 600 * scale;

var imageHeight = 450 * scale;


// var sx = imageWidth / 2 - canvas.width / 2;

// var sy = imageHeight / 2 - canvas.height / 2;


// context.drawImage(image,sx,sy,canvas.width,canvas.height,0,0,canvas.width,canvas.height);

var dx = canvas.width / 2 - imageWidth / 2;

var dy = canvas.height / 2 - imageHeight / 2;

context.clearRect(0,0,canvas.width,canvas.height);

context.drawImage(image,dx,dy,imageWidth,imageHeight);

context.drawImage(watermarkCanvas,canvas.width - watermarkCanvas.width,canvas.height - watermarkCanvas.height);


}


</script>

canvas做的图片查看器1

推荐阅读:
  1. HTML5 canvas 动画基础自学分享 1
  2. 做RAID1 遇到种种问题

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

图片 查看器 canvas

上一篇:阿里P7架构师是如何解决跨域问题的!你有遇到吗?

下一篇:js阻止表单提交的两种方法

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》