Question

我想在Javascript中动态创建一个需要满足两个要求的图像。

需要彩色背景（比如#fff）并且具有特定尺寸（比如说800x300）
我需要能够在其上放置另一个图像并定位它（希望使用CSS-esque类型规则，如宽度：150px;高度：80px;左：30px;顶部：30px;变换：旋转（7deg）; ＆＃34;等等。

您是否知道有哪种图书馆可以使用这种功能？

Answer 1

你根本不需要一个库。如果我理解正确，你只需要一个背景包含动态生成图像的容器。我只是在容器上使用背景图像或颜色，并将图像附加到其中。

使用父项上的相对位置和图像上的绝对位置，以便您可以将图像居中定位并从中心旋转图像。

创建并追加我将使用的图像：

//generate image dynamically
function dynamicImage(url){
  var img = new Image();
  img.src = url;
  img.setAttribute("class", "placeholder-image")
  return img
}

var dynamic = dynamicImage('http://placehold.it/350x150')

var container = document.querySelectorAll('.image-container')              
container[0].appendChild(dynamic)

然后我会使用css来转换图像

codepen中的示例 http://codepen.io/shperber/pen/qNVLjv

动态创建图像/ CSS到画布？

1 个答案: