[vue] canvas img.onload不执行


let image = new Image();
image.onload = (event) => {
	console.log("image loaded");
}
image.src = "static/prison_tileset.png";

解决:

要在视图中使用本地资源,您必须通过Webpack加载它们

const Logo = require("../assets/logo.png");
this.image.src = Logo;
  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue中使用Canvas进行图片放缩可以通过以下步骤实现: 1. 首先,在Vue组件中引入Canvas元素,并获取到Canvas的上下文对象: ```javascript <template> <canvas ref="canvas"></canvas> </template> <script> export default { mounted() { this.canvas = this.$refs.canvas; this.ctx = this.canvas.getContext('2d'); }, } </script> ``` 2. 加载图片并绘制到Canvas上: ```javascript methods: { loadImage() { const img = new Image(); img.src = 'path/to/image.jpg'; img.onload = () => { this.ctx.drawImage(img, 0, 0); }; }, } ``` 3. 实现图片放缩功能: ```javascript methods: { zoomIn() { const scale = 1.2; // 放大倍数 const canvasWidth = this.canvas.width; const canvasHeight = this.canvas.height; // 清空画布 this.ctx.clearRect(0, 0, canvasWidth, canvasHeight); // 缩放画布 this.canvas.width = canvasWidth * scale; this.canvas.height = canvasHeight * scale; // 绘制缩放后的图片 this.ctx.drawImage(this.$refs.canvas, 0, 0, canvasWidth * scale, canvasHeight * scale); }, zoomOut() { const scale = 0.8; // 缩小倍数 const canvasWidth = this.canvas.width; const canvasHeight = this.canvas.height; // 清空画布 this.ctx.clearRect(0, 0, canvasWidth, canvasHeight); // 缩放画布 this.canvas.width = canvasWidth * scale; this.canvas.height = canvasHeight * scale; // 绘制缩放后的图片 this.ctx.drawImage(this.$refs.canvas, 0, 0, canvasWidth * scale, canvasHeight * scale); }, } ``` 以上是一个简单的Vue组件,实现了图片的放大和缩小功能。你可以根据实际需求进行调整和扩展。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值