giả sử tôi có hình ảnh! 
cách điền hình ảnh có hoa văn
bây giờ tôi muốn để điền vào đó hình ảnh với 
và hình ảnh cuối cùng của tôi sẽ giống như thế này 
làm thế nào để làm điều đó? cho đến nay tôi đã có thể thay đổi màu của hình ảnh đó nhưng không thể điền vào mẫu.
tôi có thể làm điều đó bằng canvas html5 (mẫu) không? có cách nào để làm điều đó với php hay bất kỳ nền tảng web nào.
Sử dụng các bước sau để tạo ra mô phỏng áp dụng một mô hình ánh xạ tới áo sơ mi của bạn:
Đối với một giải pháp tốt hơn
Tạo một “vết sưng-đồ” của áo sơ mi và áp dụng nó với mô hình rô trong ba.js
Đây là mã và một Fiddle: http://jsfiddle.net/m1erickson/kzfKD/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var img1=new Image();
var img=new Image();
img.onload=function(){
img1.onload=function(){
start();
}
img1.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/4jiSz1.png";
}
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/BooMu1.png";
function start(){
ctx.drawImage(img1,0,0);
ctx.globalCompositeOperation="source-atop";
ctx.globalAlpha=.85;
var pattern = ctx.createPattern(img, 'repeat');
ctx.rect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = pattern;
ctx.fill();
ctx.globalAlpha=.15;
ctx.drawImage(img1,0,0);
ctx.drawImage(img1,0,0);
}
}); // end $(function(){});
</script>
</head>
<body>
<canvas id="canvas" width=436 height=567></canvas>
</body>
</html>
hoàn hảo! u cứu người đàn ông cuộc sống của tôi! Cảm ơn bạn. –
bằng cách nào bạn tạo ra "bump-map" của chiếc áo? tôi có thể làm điều đó với jquery, html5 hoặc tôi cần phải quay trở lại photoshop? –
Có, tạo bản đồ kết cấu (bump map) trong photoshop. – markE
Như được đề xuất trong các nhận xét về câu hỏi của bạn, một cách tiếp cận là che phủ phần tử DOM - phần tử DOM trên cùng phải là PNG có độ trong suốt và phần dưới phải là mẫu nền của bạn. Điều này cũng hoạt động (và nó nhanh hơn vì bạn không phải tính toán hình ảnh kết hợp) nhưng cung cấp một chút ít linh hoạt về cách hình ảnh được kết hợp. Với phương thức canvas, bạn có thể sử dụng bất kỳ chế độ hòa trộn nào bạn muốn.
Tùy chọn thứ hai chưa được hầu hết các trình duyệt hỗ trợ là sử dụng CSS background blend modes. Điều này sẽ cho phép bạn tạo một hình ảnh PNG với độ trong suốt, gán cho nó một màu nền và sử dụng kết hợp với CSS. Điều này nhanh và chỉ yêu cầu một phần tử DOM.
Cách tiếp cận thứ ba là sử dụng canvas. (Chỉnh sửa: Cách tiếp cận canvas của markE nhanh hơn và đơn giản hơn.) tôi thực hiện một cách tiếp cận canvas-có trụ sở tại JSFiddle này: http://jsfiddle.net/IceCreamYou/uzzLa/ - đây là ý chính:
// Get the base image data
var image_data = ctx.getImageData(0, 0, ctx.canvas.width, ctx.canvas.height);
var image_data_array = image_data.data;
// Get the pattern image data
var overlay_data = ovlyCtx.getImageData(0, 0, ovlyCtx.canvas.width, ovlyCtx.canvas.height).data;
// Loop over the pixels in the base image and merge the colors
for (var i = 0, j = image_data_array.length; i < j; i+=4) {
// Only merge when the base image pixel is nontransparent
// Alternatively you could implement a border-checking algorithm depending on your needs
if (image_data_array[i+3] > 0) {
image_data_array[i+0] = combine(image_data_array[i+0], overlay_data[i+0]); // r
image_data_array[i+1] = combine(image_data_array[i+1], overlay_data[i+1]); // g
image_data_array[i+2] = combine(image_data_array[i+2], overlay_data[i+2]); // b
}
}
// Write the image data back to the canvas
ctx.putImageData(image_data, 0, 0);
gì nó làm là tạo ra một khung với hình ảnh cơ sở và một tấm vải thứ hai gạch hình ảnh mẫu của bạn, sau đó sử dụng dữ liệu pixel để che phủ mẫu trên cơ sở khi các pixel cơ sở không trong suốt.
bạn không thể làm điều này dễ dàng, nhưng nếu bạn muốn, tôi không thể nói về bất kỳ thư viện nào để thao tác hình ảnh làm cho hình ảnh thứ hai của bạn một chút trong suốt và điền vào hình ảnh đầu tiên, vì vậy đường cong hình ảnh đầu tiên cũng sẽ hiển thị nhưng bạn đã mất một chút độ mờ đục. bạn có thể sử dụng magik, gd cho php, và điều tương tự áp dụng cho canvas nhưng phải tham khảo tài liệu của nó về cách gửi mẫu –
cảm ơn về hướng. –
Sử dụng [PNGa và CSS] (http://imgur.com/86fZO1i). –