diff --git a/modules/image/raster mask b/modules/image/raster mask index 00097c2eb32fe9c3f4cdfc1b674262b0037ebe5e..14803e72f452854d6d1b05992953bbdcc4ae0e21 100644 --- a/modules/image/raster mask +++ b/modules/image/raster mask @@ -1,5 +1,5 @@ // -// image mask +// raster mask // // Neil Gershenfeld // (c) Massachusetts Institute of Technology 2017 @@ -20,7 +20,7 @@ var mod = {} // // name // -var name = 'image mask' +var name = 'raster mask' // // initialization // @@ -39,12 +39,15 @@ var inputs = { event:function(evt){ mod.image = evt.detail mod.labelspan.style.fontWeight = 'bold' + var ctx = mod.convert.getContext("2d") + ctx.canvas.width = mod.image.width + ctx.canvas.height = mod.image.height }}, palette:{type:'text', event:function(evt){ mod.palette = JSON.parse(evt.detail) }}, - path:{type:'array', + mask:{type:'RGBA', event:function(evt){ make_mask(evt.detail) }}} @@ -70,6 +73,11 @@ var outputs = { var interface = function(div){ mod.div = div // + // off-screen conversion canvas + // + var canvas = document.createElement('canvas') + mod.convert = canvas + // // button // var btn = document.createElement('button') @@ -223,8 +231,24 @@ function save_mask(path) { text.setAttribute('dy','.2') text.textContent = name svg.appendChild(text) + + // + // raster mask // - // mask + var ctx = mod.convert.getContext("2d") + ctx.putImageData(imgdata,0,0) + var href = mod.convert.toDataURL() + var img = document.createElementNS(svgNS,'image') + img.setAttribute('id',mod.div.id+'svgimg') + img.setAttribute('x','1.5') + img.setAttribute('y','1.5') + img.setAttribute('width',imgwidth) + img.setAttribute('height',imgheight) + img.setAttributeNS('http://www.w3.org/1999/xlink','href',href) + svg.appendChild(img) + + // + // vector mask // var g = document.createElementNS(svgNS,'g') svg.appendChild(g) @@ -256,6 +280,7 @@ function save_mask(path) { g.appendChild(polyline) } } + // // file //