极客观点
项目管理
HarmonyOS
我这段为什么img放上面canvas显示不了
要是canvas放上面就能绘制出图片来???
有谁遇到过这种问题!
<div class="showimg">
<img id="img1" src='service.jpg' width="200" height="200"/>
<canvas id="canvas" width="200" height='200'/>
</div><!DOCTYPE html>
<html>
<head>
</head>
<style type="text/css">
body{text-align:center;}
.showimg{width:200px;height:200px;overflow:hidden;position:relative;margin:100px auto;}
.showimg .imgtest{position:absolute;}
.showimg .a1{top:30px;left:30px;}
.showimg .a2{top:90px;left:120px;}
.showimg{width:200px;height:200px;overflow:hidden;}
</style>
<body>
<div class="showimg">
<img id="img1" src='service.jpg' width="200" height="200"/>
<canvas id="canvas" width="200" height='200'/>
</div>
<script type="text/javascript">
window.onload = function(){
var canvas = document.getElementById('canvas');
var img = document.getElementById('img1');
var ctx = canvas.getContext('2d');
var images = new Image();
images.onload = function(){
ctx.drawImage(images,0,0,200,200);
console.log(canvas.toDataURL("image/jpg"));
}
images.src = img.src;
}
</script>
</body>
</html>
<canvas id="canvas" width="200" height='200'/>==>
<canvas id="canvas" width="200" height='200'></canvas>