问如何在网页中显示像手机机箱背面这样的形状(带有透明的摄像头孔)的图像？

EN

initCover("svg2", "layer1");
replaceCover("svg2", "layer1", "http://lorempixel.com/400/400/");


function  initCover(svgId, coverId)
{
    // Turn cover into a clipping path
    var svg = document.getElementById(svgId);
    var cover = svg.getElementById(coverId);
    var clipPath = document.createElementNS("http://www.w3.org/2000/svg", "clipPath");
    clipPath.setAttribute("id", "cover-clip");
    if (cover.getAttribute("transform"))
        clipPath.setAttribute("transform", cover.getAttribute("transform"));
    // Copy shape from cover to clipPath (assumes cover has only one child element
    clipPath.appendChild(cover.firstElementChild.cloneNode());
    svg.appendChild(clipPath);
    // Optionally hide the original cover shape
    cover.style.visibility = "hidden";
}


function  replaceCover(svgId, coverId, imageURL)
{
    var svg = document.getElementById(svgId);
    var cover = svg.getElementById(coverId);
    // Get the cover width and height
    var  coverBox = cover.getBBox();
    // Add a new image element for the image
    var  image = document.createElementNS("http://www.w3.org/2000/svg", "image");
    image.setAttributeNS("http://www.w3.org/1999/xlink", "href", imageURL);
    // Set image size so that the image fills the cover and is centred
    image.setAttribute("width", coverBox.width);
    image.setAttribute("height", coverBox.height);
    image.setAttribute("preserveAspectRatio", "xMidYMid slice");
    image.setAttribute("clip-path", "url(#cover-clip)");
    svg.appendChild(image);
}

// draw the phone case on the canvas
context.drawImage(phonecase,0,0);

// set compositing to source-in
// future drawings will only be visible where existing pixels are opaque
context.globalCompositeOperation='source-in';

// draw the artwork over the phonecase
// compositing will display the artwork only inside the opaque phonecase pixels
context.drawImage(artCanvas,offsetX,offsetY);

// always clean up! Return compositing to its default mode
context.globalCompositeOperation='source-out';

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var artCanvas=document.createElement("canvas");
var artCtx=artCanvas.getContext("2d");

var cw,ch,phone,art;

$scaleslider=$('#scaleslider');
$scaleslider.change(function(){ resetScale(); draw(); })
//
$hslider=$('#hslider');
$hslider.change(function(){ draw(); })
//
$vslider=$('#vslider');
$vslider.change(function(){ draw(); });


// image preloader
var imageURLs=[];  
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/case.png");
imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/multple/art.png");
// the loaded images will be placed in imgs[]
var imgs=[];
var imagesOK=0;
loadAllImages(start);

function loadAllImages(callback){
  for (var i=0; i<imageURLs.length; i++) {
    var img = new Image();
    imgs.push(img);
    img.onload = function(){ 
      imagesOK++; 
      if (imagesOK>=imageURLs.length ) {
        callback();
      }
    };
    img.onerror=function(){alert("image load failed");} 
    img.crossOrigin="anonymous";
    img.src = imageURLs[i];
  }      
}
//
function start(){
  // the imgs[] array now holds fully loaded images

  // user friendly names for images
  phone=imgs[0];
  art=imgs[1];

  // size the on-screen canvas to phone size
  cw=canvas.width=phone.width;
  ch=canvas.height=phone.height;

  // resetScale
  resetScale();
  // draw the initial rendering
  draw();
}

function resetScale(){
  var scale=$scaleslider.val()/100;

  // calc the scaled size of the artwork
  var artW=art.width*scale;
  var artH=art.height*scale;
  // size the off-screen canvas to allow 2x2 of art images   
  artCanvas.width=artW*2;
  artCanvas.height=artH*2;
  // draw a grid of 2x2 art images to allow horizontal
  // and vertical repositioning
  artCtx.drawImage(art,0,0,artW,artH);
  artCtx.drawImage(art,artW,0,artW,artH);
  artCtx.drawImage(art,artW,artH,artW,artH);
  artCtx.drawImage(art,0,artH,artW,artH);
  // set offsets used in horiz & vert repositioning
  $hslider.attr('max',artW);
  $hslider.val(0);
  $vslider.attr('max',artH);
  $vslider.val(0);    
}

// draw the artwork inside the phone case
// Use the slider values to reposition the artwork
function draw(){
  var offsetX=-$hslider.val();
  var offsetY=-$vslider.val();
  ctx.clearRect(0,0,cw,ch);
  ctx.save();
  ctx.drawImage(phone,0,0);
  ctx.globalCompositeOperation='source-in';
  ctx.drawImage(artCanvas,offsetX,offsetY);
  ctx.restore();
}

body{ background-color: ivory; }
canvas{border:1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Scale Artwork<input id=scaleslider type=range min=25 max=150 value=100><br>
Move Horizontally:<input id=hslider type=range min=0 max=200 value=100><br>
Move Vertically:<input id=vslider type=range min=0 max=200 value=100><br>
<canvas id="canvas" width=300 height=300></canvas>