前言
很久没写博客,辞职了一段时间换了一份工作,没有了大屏幕写起来不方便就不想写了哈哈,这段时间学习完了ES6,Node的一些基础,近期在学习vue,但感觉不是很扎实,准备第二次学习的时候再做记录。
这次遇到一个案例感觉比较有趣,给手机壳绘上图片传给后台做成手机壳,技术上使用了canvas来实现该效果,初次使用canvas,遇到了很多问题,包括传说中的异步问题以及如何将两个canvas进行合成等等,经过这个案例也算是对canvas有了一个比较清楚的认识。
实现思路
(ps:电脑无法演示缩放功能)
1.通过canvas绘制出手机壳图案,并加载后台图片
2.获取系统相册,图片加载后通过canvas绘制到手机壳上,超出手机壳的部分不显示,露出手机壳摄像头部分,并在下方滚动条中显示;如不上传也可用系统中图片
3.移动或者缩放时先重新绘制手机壳,利用回调函数,清空图案再重新绘制图案,最后再清空一遍图案(不清空会导致移动时图案会跑到手机壳上方,即手机壳摄像头位置被遮盖)
代码部分
html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/amazeui.min.css">
<link rel="stylesheet" href="css/show.css" />
<!-- <script src="http://192.168.31.246:8081/target/target-script-min.js#anonymous"></script> -->
<script>
window.onload = function(){
MoveFun1();
}
</script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col text-center">
<h4>展示</h4>
</div>
</div>
<div class="row" id="show">
<div class="col">
<img src="img/ix.png" id="backImg" / >
<canvas id="myCanvas" height="414px;" width="200px"></canvas>
<canvas id="upCanvas" ></canvas>
</div>
</div>
</div>
<div class="foot" id="foot">
<div class="am-scrollable-horizontal scroll">
<table class="am-table am-table-bordered am-table-striped am-text-nowrap">
<input id="file" type="file" style='display: none;'>
<!--用for属性绑定file控件-->
<label for="file" class="upload">
<img src="./img/custom.png" alt="" class="am-fl am-img-responsive">
</label>
<ul class="footImage">
<!-- <li class="images">
<img src="img/pic1.png"/ class="am-img-responsive">
&l