jQuery的。获取base64动态div背景图像并获取base64动态背景图像的宽度/高度

Question

http://jsfiddle.net/qkzmegkb/5/

有div

<div id="large_photo" style="width:20px; height:20px; 
background-image: url( data:image/JPG;base64,R0lGODlh... );" >
</div>

background-image根据具体情况而变化（background-image是动态的;不是静态的。）

jquery希望获得background-image

的宽度和高度

做的：

var image = document.createElement('img');//as understand i create some image (img)

//creating value for var image
var val = $('#large_photo').css('background-image'), image;
var myString = val.substr(val.indexOf("data:image/") + 0);//get part of string starting with `data:image/`
image.src = myString;

alert(image.width + ' × ' + image.height);点击0 x 0

为了比较，这有效：

var myString = 'data:image/JPG;base64,R0lGODlhCgAKAJEAAJmZmf////4BAgAAACH5BAQUAP8ALAAAAAAKAAoAAAIIhI+py+0PYysAOw==';
image.src = myString;
alert(image.width + ' × ' + image.height);

如何开始使用第一个变体？

Answer 1

使用substring()功能获取 base64 image source ，

获得图片来源后，您可以指定新的 image 元素。 image 元素 property (width and height) 以获取图片 width/height 。

查看此 Live

JQuery的

var image = document.createElement('img');
var val = $('#large_photo').css('background-image');
var myString = val.substring(4, val.length-1);

image.src = myString;

alert( image.src );
alert(image.width + ' × ' + image.height);

结果

10 x 10

---

学习代码的最简单方法，

查看此 jsFiddle

Answer 2

这是解决方案 http://jsfiddle.net/qkzmegkb/10/

问题是因为var val = $('#large_photo').css('background-image'), image;以")结尾。所以只需删除")即可。我是用myString = myString.replace('")', '');

做的

所以这是代码

var image = document.createElement('img');//create element image
var val = $('#large_photo').css('background-image'), image;//get image from div
var myString = val.substr(val.indexOf("data:image") + 0);//remove all before `data:image`
myString = myString.replace('")', ''); // remove `")`
image.src = myString;//pass content to `image`

alert( image.src );
alert(image.width + ' × ' + image.height);