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]); }