canvas教程

Canvas Layers (Z Index)

字号+ 作者:H5之家 来源:H5之家 2015-10-20 18:35 我要评论( )

I understand that Canvas is as ink dries and each item that is draw is on top.[我的理解是,帆布是油墨干燥和每个项目是画在上面。]

I understand that Canvas is as ink dries and each item that is draw is on top.

I'm having a little problem, I have a list of sources of background images

var sources = { bg: 'images/room-1/bg.png', rightWall: 'images/room-1/wall-right.png', leftWall: 'images/room-1/wall-left.png', beam: 'images/room-1/beam-left.png', sofa: 'images/room-1/sofa.png' }; loadImages(sources, function(images) { context.drawImage(images.bg, 0, 0, 760, 500); context.drawImage(images.rightWall, 714, 0, 46, 392); context.drawImage(images.leftWall, 0, 160, 194,322); context.drawImage(images.beam, 0, 45, 143,110); context.drawImage(images.sofa, 194, 280, 436,140); });

This is fine and they order how I like.

My issue is I have an image upload for a user to upload their image into the Canvas.

I am just using an upload box to test the theory, but the idea is the user will upload their image, crop, scale it, using JQuery / PHP and this saves the image. I will then grab this manipulated URL and pull this in, however the problem is that the Canvas is loaded so when i upload an image, it goes on top off the sources image.

I do not want to use multiple Canvas as I need to save this canvas as an image as a whole.

var imageLoader = document.getElementById('imageLoader'); imageLoader.addEventListener('change', handleImage, false); function handleImage(e){ var reader = new FileReader(); reader.onload = function(event){ var img = new Image(); img.onload = function(){ canvas.width = 760; canvas.height = 300; } img.src = event.target.result; img.onload = function(){ context.drawImage(img, 0, 0); }; } reader.readAsDataURL(e.target.files[0]); }

我的理解是,帆布是油墨干燥和每个项目是画在上面。

我有一个小问题,我有一个列表的背景图片来源

var sources = { bg: 'images/room-1/bg.png', rightWall: 'images/room-1/wall-right.png', leftWall: 'images/room-1/wall-left.png', beam: 'images/room-1/beam-left.png', sofa: 'images/room-1/sofa.png' }; loadImages(sources, function(images) { context.drawImage(images.bg, 0, 0, 760, 500); context.drawImage(images.rightWall, 714, 0, 46, 392); context.drawImage(images.leftWall, 0, 160, 194,322); context.drawImage(images.beam, 0, 45, 143,110); context.drawImage(images.sofa, 194, 280, 436,140); });

这是好的,他们要我怎么样。

我的问题是我有一个用户上传自己的图片到画布图像上传。

我只使用一个上传框来检验这个理论,但这个想法是用户可以上传自己的图片,作物,规模,使用jQuery / PHP和保存图像。我会抓住这个操作URL拉这个,但是问题是,帆布加载当我上传一个图像,它在从源图像。

我不想使用多个画布上我要保存的帆布作为一个整体形象。

var imageLoader = document.getElementById('imageLoader'); imageLoader.addEventListener('change', handleImage, false); function handleImage(e){ var reader = new FileReader(); reader.onload = function(event){ var img = new Image(); img.onload = function(){ canvas.width = 760; canvas.height = 300; } img.src = event.target.result; img.onload = function(){ context.drawImage(img, 0, 0); }; } reader.readAsDataURL(e.target.files[0]); }

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • html5canvas核心技术图形、动画与游戏开发源码

    html5canvas核心技术图形、动画与游戏开发源码

    2017-05-02 17:42

  • 打印html5中Canvas的方法

    打印html5中Canvas的方法

    2017-05-01 15:03

  • HTML5+Canvas调用手机拍照功能实现图片上传(下)

    HTML5+Canvas调用手机拍照功能实现图片上传(下)

    2017-04-30 17:00

  • 学习慕课网canvas倒计时实例笔记

    学习慕课网canvas倒计时实例笔记

    2017-04-30 14:01

网友点评
s